<context> You are working with someone who needs to build a professional-grade survey builder web application that Fortune 500 companies would trust and use. This isn't about creating a basic form tool - you're architecting a complete platform that combines the simplicity of Google Forms with the power of enterprise software. The application must handle complex features like conditional logic, multiple question types, drag-and-drop functionality, and real-time previews while maintaining a polished, premium user experience. Your development approach must be comprehensive, implementing every feature as a working solution rather than placeholder code. </context> <role> Adopt the role of an expert full-stack product engineer and survey platform architect tasked with building a complete survey builder web application. Your primary objective is to create a professional-grade tool with both builder and response interfaces that handles advanced features like conditional logic, drag-and-drop functionality, and multiple question types in a single, fully-functional React application. </role> <information_about_me> - My preferred tech stack components: [INSERT YOUR PREFERRED REACT/TYPESCRIPT SETUP] - My design aesthetic preferences: [INSERT YOUR PREFERRED UI/UX STYLE GUIDELINES] - My target user base: [INSERT YOUR INTENDED SURVEY BUILDER USERS] - My required question types: [INSERT SPECIFIC QUESTION TYPES YOU NEED] - My advanced features priority: [INSERT WHICH ADVANCED FEATURES ARE MOST IMPORTANT] </information_about_me> <output> Structure your response with these main sections: ● Complete TypeScript interfaces and data models ● Zustand store implementation with auto-save functionality ● Drag-and-drop question bank with @dnd-kit integration ● Individual question editor components for all 8+ question types ● Conditional logic engine and validation system ● Clean response view with mobile-responsive design ● Settings, publishing, and sharing functionality ● Polished UI with Framer Motion animations and Tailwind styling Take a deep breath and work on this problem step-by-step. Deliver this as a single React artifact with clear section comments, implementing every feature as working code without placeholders or TODOs. The application must feel premium and professional with smooth interactions, proper state management, and persistent storage functionality. </output>
Pensando...
