Build a comprehensive website builder tool targeting both technical and non-technical users. The system should use JSON for data management initially (frontend-only), with plans for backend integration later. The core value proposition is delivering complete, production-ready React projects with perfect folder structure that work immediately after npm install && npm run dev.
- Enable full customization of all content elements (images, videos, text, titles, paragraphs, buttons, icons any other editable content)
- Provide dual customization approach:
- Manual Tailwind CSS input for advanced users ✅
- Visual option selection for non-technical users ✅
- Ensure all customizations are properly applied and exportable
- Allow unlimited page creation and deletion ✅
- Default pages: Home, About, Service, Contact ✅
- Each page should be fully customizable and manageable ✅
- Implement proper routing structure for all pages ❓❓
- Create extensive library of pre-built components with multiple variants: ✅
- Navigation bars (multiple designs) ✅
- Hero sections (various layouts) ✅
- Service sections (different styles) ✅
- Feature sections (different styles) ✅
- Contact sections (different styles) ✅
- Footer components (multiple options) ✅
- Additional UI components as needed ❓❓
- Each component category should offer diverse design options ✅
- Components must be easily selectable and swappable ✅
- Implement intuitive drag-and-drop interface for section reordering ✅
- Maintain component integrity during reordering ✅
- Provide visual feedback during drag operations ✅
- Complete theme control via Tailwind CSS ✅
- Color picker integration for easy theme updates ✅
- Theme changes should apply globally while respecting component-specific customizations ❓❓
- Provide pre-designed templates as starting points ✅
- Allow complete template customization after selection ❓❓
- Template selection should not lock users into rigid structures ✅
- All content changes should be stored within respective components
- Maintain content persistence across sessions
- Enable inline editing for text content
- Generate complete, organized React project structure ✅
- Include all necessary dependencies and configurations ✅
- Ensure exported project includes: ✅
- Proper React Router DOM setup ✅
- All selected and customized components ✅
- Complete page structure ✅
- Tailwind CSS configuration ✅
- Package.json with all dependencies ✅
- Export as downloadable ZIP file ✅
- Critical: Exported project must work perfectly with just
npm install && npm run dev
- Track project creation, exports, and content modifications
- Monitor most-used components for insights
- Store user preferences and project history
- Initialize users with 3 free credits
- Deduct 1 credit per project export/download
- Implement credit purchase system ($3 per credit)
- Provide clear credit balance visibility
- Real-time preview updates without page refresh ✅
- Instant visual feedback for all changes ✅
- Seamless editing experience ✅
- Built-in device view switcher (mobile, tablet, desktop)
- Real-time responsiveness testing
- Ensure all components work across all screen sizes
- Comprehensive action history tracking
- Support for content changes, component swaps, and structural modifications
- Intuitive keyboard shortcuts (Ctrl+Z, Ctrl+Y)
- Automatic background saving
- Manual save option for user control ✅
- Visual save status indicators
- Intuitive component placement and reordering ✅
- Visual drop zones and feedback
- Smooth animations and transitions
- Search functionality for component library
- Category-based filtering
- Clear component previews and descriptions
- Dark/Light mode toggle for editor UI
- User preference persistence
- Comfortable editing environment
- Meta title and description editing per page
- Custom favicon upload and management
- Basic SEO optimization tools
- Custom script integration (Google Analytics, etc.)
- Individual page meta tag management
- URL slug customization
- Page-specific configurations
- Ensure pixel-perfect responsiveness across all devices
- Test thoroughly on desktop, tablet, and mobile viewports
- Use appropriate Tailwind CSS responsive utilities
- Implement real-time inline validations
- Provide clear error messaging and user guidance
- Use proper input types and accessibility features
- Include auto-complete and focus management
- Optimize for performance and usability
Handle all potential edge cases gracefully:
- Empty states with helpful messaging
- Broken or missing images with fallbacks
- Unauthorized access scenarios
- Loading states for all operations
- Error states for failed operations
- Form submission failures with recovery options
- Write clean, readable code without inline comments
- Use descriptive variable and function names
- Build reusable, decoupled UI components
- Implement proper prop typing (TypeScript preferred)
- Maintain clear separation of concerns
- Ensure component reusability across the application
- Maintain comprehensive README.md with:
- Clear setup instructions
- Technology stack overview
- Available scripts and commands
- Deployment guidelines
- Write JSDoc/TSDoc for public utilities and services
- Document complex logic and business rules
- Technical Users: Provide advanced customization options, code access, and detailed controls
- Non-Technical Users: Offer intuitive visual interfaces, guided workflows, and simplified options
- Universal Features: Ensure all functionality is accessible regardless of technical expertise
The project succeeds when:
- Exported projects work immediately after
npm install && npm run dev - Both technical and non-technical users can create professional websites
- All customizations are properly preserved and functional
- The interface is intuitive and responsive across all devices
- The component library provides sufficient variety for diverse needs
- The credit system operates smoothly and transparently
- bg-[#1c1c1c] for background
- bg-[#272725] for accents
- text-white for texts
- Dynamic Array/Object Input Handling: ✅ [need to test it again for each component array ] When an element is selected in a component and its type is an array or object, we want to dynamically render inputs based on the array.length, prefilled with the existing data. Users should be able to add, update, or delete any item in that array/object directly through the UI.
-- still the image or video is not been renderend in the live preivew of the component
-
in advnaced mode, the tailwindCss or customCss is not been applied correct to that element
-
saari fucntuonality ko test kro hr 1 element ko update kr skey uska content uski styles everything