Files
websitebuilder/TASKS.md
Kunthawat Greethong 4d1bb6892b
Some checks failed
CI / build (push) Has been cancelled
CI / test (push) Has been cancelled
CI / e2e (push) Has been cancelled
CI / lint (push) Has been cancelled
Add websitebuilder app
2026-01-26 12:50:12 +07:00

1021 lines
22 KiB
Markdown

# MoreMinimore SAAS - Task Breakdown
## Overview
This document breaks down the massive transformation project into manageable tasks organized by development phases.
---
## Phase 1: Foundation (Weeks 1-4)
### 1.1 Project Setup
- [ ] **1.1.1** Initialize Next.js 15 project with TypeScript
- Create new Next.js project using `npx create-next-app@latest`
- Configure TypeScript strict mode
- Set up ESLint and Prettier
- Configure Tailwind CSS 4
- [ ] **1.1.2** Set up project structure
- Create folder structure: `src/app`, `src/components`, `src/lib`, `src/services`, `src/types`
- Set up environment variables template
- Configure absolute imports
- Set up path aliases
- [ ] **1.1.3** Install dependencies
- Install Drizzle ORM
- Install Zustand for state management
- Install React Query for server state
- Install shadcn/ui components
- Install other required packages
### 1.2 Database Setup
- [ ] **1.2.1** Set up PostgreSQL database
- Install PostgreSQL locally
- Create database `moreminimore`
- Configure connection pooling
- Set up database user with proper permissions
- [ ] **1.2.2** Configure Drizzle ORM
- Install Drizzle ORM and Drizzle Kit
- Create `drizzle.config.ts`
- Set up database connection
- Configure migration settings
- [ ] **1.2.3** Create database schema
- Create `src/db/schema.ts` with all tables
- Define relationships
- Add indexes for performance
- Create initial migration
- [ ] **1.2.4** Set up Redis
- Install Redis locally
- Configure Redis client
- Set up connection pooling
- Test Redis connectivity
### 1.3 Authentication System
- [ ] **1.3.1** Implement password hashing
- Install bcrypt
- Create password hashing utility
- Create password verification utility
- Write unit tests
- [ ] **1.3.2** Implement JWT tokens
- Install jsonwebtoken
- Create JWT generation utility
- Create JWT verification utility
- Configure token expiration
- [ ] **1.3.3** Create user registration API
- `POST /api/auth/register`
- Validate email and password
- Hash password
- Create user record
- Send verification email
- [ ] **1.3.4** Create user login API
- `POST /api/auth/login`
- Verify credentials
- Generate access and refresh tokens
- Set HTTP-only cookies
- Return user data
- [ ] **1.3.5** Create token refresh API
- `POST /api/auth/refresh`
- Verify refresh token
- Generate new access token
- Rotate refresh token
- Update session
- [ ] **1.3.6** Create logout API
- `POST /api/auth/logout`
- Clear cookies
- Invalidate session
- Revoke refresh token
- [ ] **1.3.7** Create email verification API
- `POST /api/auth/verify-email`
- Verify token
- Update user email_verified status
- Handle expired tokens
- [ ] **1.3.8** Create password reset APIs
- `POST /api/auth/forgot-password`
- `POST /api/auth/reset-password`
- Generate reset token
- Send reset email
- Verify and update password
- [ ] **1.3.9** Create authentication middleware
- Create `requireAuth` middleware
- Create `requireRole` middleware
- Create `requireOrgMembership` middleware
- Handle token errors
### 1.4 User Management
- [ ] **1.4.1** Create user profile APIs
- `GET /api/users/me`
- `PATCH /api/users/me`
- Update profile information
- Change password
- Upload avatar
- [ ] **1.4.2** Create admin user APIs
- `GET /api/users` (admin only)
- `GET /api/users/:id` (admin only)
- `PATCH /api/users/:id` (admin only)
- `DELETE /api/users/:id` (admin only)
- Ban/unban users
- [ ] **1.4.3** Create user management UI
- User profile page
- Settings page
- Admin user management page
- User search and filtering
### 1.5 CI/CD Pipeline
- [ ] **1.5.1** Set up GitHub Actions
- Create workflow file
- Configure build step
- Configure test step
- Configure deployment step
- [ ] **1.5.2** Set up automated testing
- Configure Vitest
- Set up test coverage
- Configure Playwright for E2E tests
- Integrate with CI/CD
---
## Phase 2: Core Features (Weeks 5-8)
### 2.1 Organization Management
- [ ] **2.1.1** Create organization APIs
- `POST /api/organizations`
- `GET /api/organizations`
- `GET /api/organizations/:id`
- `PATCH /api/organizations/:id`
- `DELETE /api/organizations/:id`
- [ ] **2.1.2** Create organization member APIs
- `POST /api/organizations/:id/members`
- `GET /api/organizations/:id/members`
- `PATCH /api/organizations/:id/members/:memberId`
- `DELETE /api/organizations/:id/members/:memberId`
- [ ] **2.1.3** Create organization UI
- Organization creation page
- Organization dashboard
- Member management page
- Organization settings page
### 2.2 Project Management
- [ ] **2.2.1** Create project APIs
- `POST /api/projects`
- `GET /api/projects`
- `GET /api/projects/:id`
- `PATCH /api/projects/:id`
- `DELETE /api/projects/:id`
- [ ] **2.2.2** Create project UI
- Project creation page
- Project list page
- Project dashboard
- Project settings page
- [ ] **2.2.3** Implement project templates
- Create template system
- Add default templates
- Template selection UI
- Template customization
### 2.3 Chat Interface
- [ ] **2.3.1** Create chat APIs
- `POST /api/projects/:id/chats`
- `GET /api/projects/:id/chats`
- `GET /api/chats/:id`
- `DELETE /api/chats/:id`
- [ ] **2.3.2** Create message APIs
- `POST /api/chats/:id/messages`
- `GET /api/chats/:id/messages`
- Stream responses
- [ ] **2.3.3** Create chat UI
- Chat interface component
- Message list component
- Message input component
- Chat history sidebar
- [ ] **2.3.4** Implement real-time updates
- Set up WebSocket or Server-Sent Events
- Real-time message streaming
- Typing indicators
- Connection status
### 2.4 AI Integration
- [ ] **2.4.1** Create AI provider configuration
- Define AI provider interfaces
- Configure OpenAI provider
- Configure Anthropic provider
- Configure Google provider
- Configure custom providers
- [ ] **2.4.2** Create AI service
- Implement AI client factory
- Implement message streaming
- Handle tool calls
- Manage context window
- [ ] **2.4.3** Create AI model management
- `GET /api/ai/models`
- `GET /api/ai/providers`
- User API key management
- Model selection UI
- [ ] **2.4.4** Implement code generation
- Create code generation prompts
- Implement code parsing
- Handle file operations
- Validate generated code
### 2.5 Code Editor
- [ ] **2.5.1** Integrate Monaco Editor
- Install @monaco-editor/react
- Configure Monaco Editor
- Set up syntax highlighting
- Configure auto-completion
- [ ] **2.5.2** Create file management APIs
- `GET /api/projects/:id/files`
- `GET /api/projects/:id/files/*`
- `PUT /api/projects/:id/files/*`
- `DELETE /api/projects/:id/files/*`
- [ ] **2.5.3** Create file management UI
- File tree component
- File editor component
- File creation/deletion
- File search
- [ ] **2.5.4** Implement file operations
- Create file
- Update file
- Delete file
- Rename file
- Move file
### 2.6 Preview System
- [ ] **2.6.1** Create preview API
- `GET /api/projects/:id/preview`
- Generate preview URL
- Handle preview updates
- [ ] **2.6.2** Create preview UI
- Preview iframe component
- Responsive device toggle
- Refresh preview
- Open in new tab
- [ ] **2.6.3** Implement live preview
- Auto-refresh on file changes
- Hot module replacement
- Error handling
### 2.7 Version Control
- [ ] **2.7.1** Create version APIs
- `POST /api/projects/:id/versions`
- `GET /api/projects/:id/versions`
- `GET /api/versions/:id`
- `POST /api/versions/:id/rollback`
- [ ] **2.7.2** Create version UI
- Version history list
- Version comparison
- Rollback confirmation
- Version tags
---
## Phase 3: UI/UX Pro Max Integration (Weeks 9-10)
### 3.1 UI/UX Pro Max Setup
- [ ] **3.1.1** Install UI/UX Pro Max
- Clone or download UI/UX Pro Max
- Copy skill files to project
- Install Python dependencies
- Test Python script
- [ ] **3.1.2** Create design system service
- Create `DesignSystemService` class
- Implement `generateDesignSystem` method
- Implement `persistDesignSystem` method
- Implement `getDesignSystem` method
- [ ] **3.1.3** Create design system database operations
- Create design_systems table
- Create CRUD operations
- Add indexes
- Write unit tests
### 3.2 Design System Generation
- [ ] **3.2.1** Create design system generation API
- `POST /api/projects/:id/design-system`
- Accept project description
- Call UI/UX Pro Max script
- Parse and store results
- [ ] **3.2.2** Create design system UI
- Design system display component
- Color palette preview
- Typography preview
- Effects preview
- [ ] **3.2.3** Integrate with AI prompts
- Enhance AI prompts with design system
- Apply design system to generated code
- Validate against anti-patterns
- Generate design-compliant code
### 3.3 Design System Management
- [ ] **3.3.1** Create design system update API
- `PATCH /api/projects/:id/design-system`
- Update design system
- Regenerate design system
- [ ] **3.3.2** Create design system management UI
- Edit design system
- Regenerate design system
- Apply to specific pages
- Export design system
---
## Phase 4: Easypanel Integration (Weeks 11-13)
### 4.1 Easypanel API Client
- [ ] **4.1.1** Create Easypanel service
- Create `EasypanelService` class
- Implement authentication
- Implement request handling
- Add error handling
- [ ] **4.1.2** Implement database operations
- `createDatabase` method
- `getDatabase` method
- `deleteDatabase` method
- Handle database errors
- [ ] **4.1.3** Implement application operations
- `createApplication` method
- `getApplication` method
- `updateApplication` method
- `deleteApplication` method
- `deployApplication` method
- [ ] **4.1.4** Implement environment variable operations
- `setEnvironmentVariables` method
- `getEnvironmentVariables` method
- Handle variable updates
### 4.2 Deployment Service
- [ ] **4.2.1** Create deployment service
- Create `DeploymentService` class
- Implement `deployProject` method
- Implement `updateDeployment` method
- Handle deployment errors
- [ ] **4.2.2** Create deployment APIs
- `POST /api/projects/:id/deploy`
- `POST /api/projects/:id/deploy/update`
- `GET /api/projects/:id/deployments`
- `GET /api/deployments/:id/logs`
- [ ] **4.2.3** Create deployment UI
- Deployment button
- Deployment configuration form
- Deployment status display
- Deployment logs viewer
### 4.3 Deployment Management
- [ ] **4.3.1** Implement deployment tracking
- Track deployment status
- Store deployment logs
- Handle deployment errors
- Send notifications
- [ ] **4.3.2** Create deployment history UI
- Deployment list
- Deployment details
- Deployment comparison
- Rollback functionality
---
## Phase 5: Gitea Integration (Weeks 14-15)
### 5.1 Gitea API Client
- [ ] **5.1.1** Create Gitea service
- Create `GiteaService` class
- Implement authentication
- Implement request handling
- Add error handling
- [ ] **5.1.2** Implement repository operations
- `createRepository` method
- `getRepository` method
- `deleteRepository` method
- Handle repository errors
- [ ] **5.1.3** Implement commit operations
- `createCommit` method
- `getCommit` method
- `getCommits` method
- Handle commit errors
### 5.2 Code Backup
- [ ] **5.2.1** Implement automatic backup
- Backup on file save
- Backup on deployment
- Backup on version creation
- Handle backup errors
- [ ] **5.2.2** Create backup APIs
- `POST /api/projects/:id/backup`
- `GET /api/projects/:id/backups`
- `GET /api/backups/:id`
- [ ] **5.2.3** Create backup UI
- Backup status display
- Backup history
- Manual backup button
- Restore from backup
### 5.3 Version History
- [ ] **5.3.1** Implement version tracking
- Track commits
- Store commit metadata
- Link commits to versions
- Handle version conflicts
- [ ] **5.3.2** Create version comparison UI
- Diff viewer
- Side-by-side comparison
- Line-by-line changes
- File comparison
---
## Phase 6: Billing & Subscription (Weeks 16-18)
### 6.1 Stripe Integration
- [ ] **6.1.1** Install Stripe SDK
- Install Stripe package
- Configure Stripe client
- Set up webhook handler
- Test Stripe connection
- [ ] **6.1.2** Create billing service
- Create `BillingService` class
- Implement customer creation
- Implement subscription creation
- Implement invoice handling
- [ ] **6.1.3** Create billing APIs
- `POST /api/billing/checkout`
- `GET /api/billing/subscription`
- `POST /api/billing/portal`
- `GET /api/billing/invoices`
### 6.2 Subscription Management
- [ ] **6.2.1** Create subscription tiers
- Define pricing tiers
- Create Stripe products
- Create Stripe prices
- Configure tier limits
- [ ] **6.2.2** Implement subscription logic
- Enforce tier limits
- Handle subscription changes
- Handle subscription cancellation
- Handle trial periods
- [ ] **6.2.3** Create subscription UI
- Pricing page
- Subscription management page
- Payment method management
- Invoice history
### 6.3 Webhook Handling
- [ ] **6.3.1** Implement webhook endpoints
- `POST /api/webhooks/stripe`
- Verify webhook signatures
- Handle subscription events
- Handle invoice events
- [ ] **6.3.2** Implement event handlers
- Handle subscription created
- Handle subscription updated
- Handle subscription deleted
- Handle invoice payment succeeded
- Handle invoice payment failed
### 6.4 Usage Analytics
- [ ] **6.4.1** Track usage metrics
- Track AI token usage
- Track project count
- Track deployment count
- Track team member count
- [ ] **6.4.2** Create usage UI
- Usage dashboard
- Usage charts
- Usage alerts
- Upgrade prompts
---
## Phase 7: Migration & Cleanup (Weeks 19-20)
### 7.1 Remove External Services
- [ ] **7.1.1** Remove Supabase integration
- Remove Supabase dependencies
- Remove Supabase code
- Remove Supabase environment variables
- Update documentation
- [ ] **7.1.2** Remove Neon integration
- Remove Neon dependencies
- Remove Neon code
- Remove Neon environment variables
- Update documentation
- [ ] **7.1.3** Remove Vercel integration
- Remove Vercel dependencies
- Remove Vercel code
- Remove Vercel environment variables
- Update documentation
- [ ] **7.1.4** Remove Electron dependencies
- Remove Electron packages
- Remove Electron code
- Remove Electron configuration
- Update build scripts
### 7.2 Remove "dyad" Branding
- [ ] **7.2.1** Search and replace "dyad" references
- Search all files for "dyad"
- Replace with "moreminimore"
- Update variable names
- Update comments
- [ ] **7.2.2** Update branding assets
- Update logos
- Update icons
- Update colors
- Update fonts
- [ ] **7.2.3** Update documentation
- Update README
- Update API documentation
- Update user guides
- Update developer docs
### 7.3 Code Cleanup
- [ ] **7.3.1** Remove unused code
- Identify unused files
- Identify unused functions
- Identify unused dependencies
- Remove unused imports
- [ ] **7.3.2** Refactor code
- Improve code organization
- Extract reusable components
- Improve naming conventions
- Add missing comments
- [ ] **7.3.3** Optimize performance
- Optimize database queries
- Optimize API responses
- Optimize bundle size
- Implement caching
---
## Phase 8: Testing & Optimization (Weeks 21-22)
### 8.1 Unit Testing
- [ ] **8.1.1** Write unit tests for services
- Test authentication service
- Test user service
- Test project service
- Test AI service
- [ ] **8.1.2** Write unit tests for utilities
- Test password hashing
- Test JWT generation
- Test validation
- Test formatting
- [ ] **8.1.3** Achieve 80% code coverage
- Measure coverage
- Identify gaps
- Write missing tests
- Maintain coverage
### 8.2 Integration Testing
- [ ] **8.2.1** Write integration tests for APIs
- Test authentication flow
- Test project creation
- Test chat flow
- Test deployment flow
- [ ] **8.2.2** Write integration tests for database
- Test database operations
- Test migrations
- Test relationships
- Test transactions
### 8.3 E2E Testing
- [ ] **8.3.1** Write E2E tests for user flows
- Test registration flow
- Test project creation flow
- Test deployment flow
- Test billing flow
- [ ] **8.3.2** Set up Playwright
- Configure Playwright
- Create test fixtures
- Set up test data
- Configure test reporting
### 8.4 Performance Optimization
- [ ] **8.4.1** Optimize database queries
- Add missing indexes
- Optimize complex queries
- Implement query caching
- Monitor query performance
- [ ] **8.4.2** Optimize API responses
- Implement response compression
- Optimize JSON serialization
- Implement pagination
- Add response caching
- [ ] **8.4.3** Optimize frontend performance
- Implement code splitting
- Optimize bundle size
- Implement lazy loading
- Optimize images
### 8.5 Security Audit
- [ ] **8.5.1** Conduct security review
- Review authentication flow
- Review authorization logic
- Review input validation
- Review error handling
- [ ] **8.5.2** Fix security issues
- Patch vulnerabilities
- Implement security headers
- Add rate limiting
- Implement CSRF protection
- [ ] **8.5.3** Security testing
- Run security scanners
- Perform penetration testing
- Test for XSS
- Test for SQL injection
### 8.6 Load Testing
- [ ] **8.6.1** Set up load testing
- Configure load testing tool
- Create test scenarios
- Define load parameters
- Set up monitoring
- [ ] **8.6.2** Run load tests
- Test concurrent users
- Test API throughput
- Test database performance
- Test resource usage
- [ ] **8.6.3** Optimize based on results
- Identify bottlenecks
- Implement optimizations
- Re-test
- Document results
---
## Phase 9: Deployment & Launch (Weeks 23-24)
### 9.1 Production Setup
- [ ] **9.1.1** Set up VPS
- Provision VPS
- Configure firewall
- Set up SSH access
- Configure security
- [ ] **9.1.2** Install dependencies
- Install Node.js
- Install PostgreSQL
- Install Redis
- Install Nginx
- [ ] **9.1.3** Configure services
- Configure PostgreSQL
- Configure Redis
- Configure Nginx
- Configure PM2
### 9.2 SSL Configuration
- [ ] **9.2.1** Install Certbot
- Install Certbot
- Configure Certbot
- Test Certbot
- Set up auto-renewal
- [ ] **9.2.2** Configure SSL certificates
- Generate SSL certificates
- Configure Nginx with SSL
- Test SSL configuration
- Verify SSL security
### 9.3 Application Deployment
- [ ] **9.3.1** Deploy application
- Build application
- Upload to server
- Configure environment variables
- Start application with PM2
- [ ] **9.3.2** Configure Nginx
- Configure reverse proxy
- Configure SSL
- Configure caching
- Configure compression
- [ ] **9.3.3** Test deployment
- Test application
- Test API endpoints
- Test authentication
- Test deployment flow
### 9.4 Monitoring & Logging
- [ ] **9.4.1** Set up monitoring
- Configure application monitoring
- Set up error tracking
- Configure performance monitoring
- Set up uptime monitoring
- [ ] **9.4.2** Set up logging
- Configure application logging
- Configure access logging
- Configure error logging
- Set up log rotation
- [ ] **9.4.3** Set up alerts
- Configure error alerts
- Configure performance alerts
- Configure uptime alerts
- Configure security alerts
### 9.5 Backup System
- [ ] **9.5.1** Set up database backups
- Configure automated backups
- Set up backup retention
- Test backup restoration
- Document backup process
- [ ] **9.5.2** Set up file backups
- Configure file backups
- Set up backup retention
- Test backup restoration
- Document backup process
### 9.6 Launch Preparation
- [ ] **9.6.1** Create launch checklist
- Verify all features work
- Verify security measures
- Verify performance
- Verify monitoring
- [ ] **9.6.2** Prepare documentation
- Update user documentation
- Update API documentation
- Create troubleshooting guide
- Create FAQ
- [ ] **9.6.3** Prepare support
- Set up support email
- Create support templates
- Train support team
- Set up support tools
### 9.7 Launch
- [ ] **9.7.1** Soft launch
- Launch to beta users
- Monitor performance
- Collect feedback
- Fix issues
- [ ] **9.7.2** Public launch
- Announce launch
- Monitor traffic
- Monitor performance
- Handle support requests
- [ ] **9.7.3** Post-launch
- Analyze metrics
- Collect feedback
- Plan improvements
- Celebrate! 🎉
---
## Task Priority
### High Priority (Must Have)
- Authentication system
- User management
- Project management
- AI integration
- Code editor
- Easypanel integration
- Gitea integration
### Medium Priority (Should Have)
- UI/UX Pro Max integration
- Billing system
- Version control
- Preview system
- Deployment management
### Low Priority (Nice to Have)
- Advanced analytics
- Custom domains
- Team collaboration features
- Advanced security features
- Performance optimizations
---
## Estimated Timeline
| Phase | Duration | Start Date | End Date |
| ---------------------- | ------------ | ---------- | -------- |
| Phase 1: Foundation | 4 weeks | Week 1 | Week 4 |
| Phase 2: Core Features | 4 weeks | Week 5 | Week 8 |
| Phase 3: UI/UX Pro Max | 2 weeks | Week 9 | Week 10 |
| Phase 4: Easypanel | 3 weeks | Week 11 | Week 13 |
| Phase 5: Gitea | 2 weeks | Week 14 | Week 15 |
| Phase 6: Billing | 3 weeks | Week 16 | Week 18 |
| Phase 7: Migration | 2 weeks | Week 19 | Week 20 |
| Phase 8: Testing | 2 weeks | Week 21 | Week 22 |
| Phase 9: Deployment | 2 weeks | Week 23 | Week 24 |
| **Total** | **24 weeks** | | |
---
## Notes
- This is a comprehensive breakdown of all tasks
- Some tasks may be completed faster or slower than estimated
- Tasks can be worked on in parallel where possible
- Regular reviews and adjustments will be needed
- This document will be updated as the project progresses
---
**Document Version**: 1.0
**Last Updated**: January 19, 2026
**Author**: MoreMinimore Development Team