YOUR_PROJECT_NAME Describe your project in 2-3 sentences. What are you building? What problem does it solve? Who is it for? Include key features and design goals. React with Vite Tailwind CSS React hooks and context React Router for navigation 3000 Node.js with Express SQLite with better-sqlite3 3001 RESTful endpoints - Node.js 18+ installed - npm or pnpm package manager - Any API keys or external services needed - User registration with email/password - User login with session management - User logout - Password reset flow - Profile management - Create new items - View list of items with pagination - Edit existing items - Delete items with confirmation - Search and filter items - Responsive layout (mobile, tablet, desktop) - Dark/light theme toggle - Loading states and skeletons - Error handling with user feedback - Toast notifications for actions - Data validation on forms - Auto-save drafts - Export data functionality - Import data functionality - id (PRIMARY KEY) - email (UNIQUE, NOT NULL) - password_hash (NOT NULL) - name - avatar_url - preferences (JSON) - created_at, updated_at - id (PRIMARY KEY) - user_id (FOREIGN KEY -> users.id) - title (NOT NULL) - description - status (enum: draft, active, archived) - created_at, updated_at - POST /api/auth/register - POST /api/auth/login - POST /api/auth/logout - GET /api/auth/me - PUT /api/auth/profile - POST /api/auth/forgot-password - POST /api/auth/reset-password - GET /api/items (list with pagination, search, filters) - POST /api/items (create) - GET /api/items/:id (get single) - PUT /api/items/:id (update) - DELETE /api/items/:id (delete) Describe the overall layout structure: - Header with navigation and user menu - Sidebar for navigation (collapsible on mobile) - Main content area - Footer (optional) - Logo/brand at top - Navigation links - Quick actions - User profile at bottom - Page header with title and actions - Content area with cards/lists/forms - Pagination or infinite scroll - Confirmation dialogs - Form modals for create/edit - Settings modal - Help/keyboard shortcuts reference - Primary: #3B82F6 (blue) - Secondary: #10B981 (green) - Accent: #F59E0B (amber) - Background: #FFFFFF (light), #1A1A1A (dark) - Surface: #F5F5F5 (light), #2A2A2A (dark) - Text: #1F2937 (light), #E5E5E5 (dark) - Border: #E5E5E5 (light), #404040 (dark) - Error: #EF4444 - Success: #10B981 - Warning: #F59E0B - Font family: Inter, system-ui, -apple-system, sans-serif - Headings: font-semibold - Body: font-normal, leading-relaxed - Code: JetBrains Mono, Consolas, monospace - Primary: colored background, white text, rounded - Secondary: border style, hover fill - Ghost: transparent, hover background - Icon buttons: square with hover state - Rounded borders with focus ring - Clear placeholder text - Error states with red border - Disabled state styling - Subtle border or shadow - Rounded corners (8px) - Hover state for interactive cards - Smooth transitions (150-300ms) - Fade in for new content - Slide animations for modals/sidebars - Loading spinners - Skeleton loaders 1. User arrives at landing page 2. Clicks "Get Started" or "Sign Up" 3. Fills registration form 4. Receives confirmation 5. Redirected to main dashboard 1. User clicks "Create New" 2. Form modal opens 3. User fills in details 4. Clicks save 5. Item appears in list with success toast - Initialize frontend with Vite + React - Set up Express backend - Create SQLite database with schema - Configure CORS and middleware - Set up environment variables - Implement user registration - Build login/logout flow - Add session management - Create protected routes - Build user profile page - Build main CRUD operations - Implement list views with pagination - Add search and filtering - Create form validation - Handle error states - Implement responsive design - Add dark/light theme - Create loading states - Add animations and transitions - Implement toast notifications - Test all user flows - Fix edge cases - Optimize performance - Ensure accessibility - Final UI polish - All features work as specified - No console errors in browser - Proper error handling throughout - Data persists correctly in database - Intuitive navigation and workflows - Responsive on all device sizes - Fast load times (< 2s) - Clear feedback for all actions - Accessible (keyboard navigation, ARIA labels) - Clean, maintainable code structure - Consistent coding style - Proper separation of concerns - Secure authentication - Input validation and sanitization - Consistent visual design - Smooth animations - Professional appearance - Both themes fully implemented - No layout issues or overflow