163 lines
6.8 KiB
Markdown
163 lines
6.8 KiB
Markdown
# TODO: kreatiVortex - Platform Pembelajaran Tari Online
|
|
|
|
**Created by:** AI Assistant
|
|
**Date:** 2025-11-28
|
|
**Purpose:** Complete development of kreatiVortex online dance learning platform with user management, video content, forums, and assignment system
|
|
|
|
## 📋 Task Breakdown
|
|
|
|
### Phase 1: Project Setup & Foundation
|
|
|
|
- [ ] Initialize Next.js 16+ project with TypeScript
|
|
- [ ] Install and configure Better Auth framework
|
|
- [ ] Set up Prisma ORM with database connection
|
|
- [ ] Configure project structure following AI_GUIDE.md patterns
|
|
- [ ] Set up ESLint, TypeScript configuration
|
|
- [ ] Create basic layout and routing structure
|
|
|
|
### Phase 2: Database Schema & Models
|
|
|
|
- [ ] Create User model with role-based access (Administrator, Pendidik, Calon Pendidik, Umum)
|
|
- [ ] Create Class/Instansi model for class management
|
|
- [ ] Create Video model with YouTube/local file support
|
|
- [ ] Create Forum model (General and Class-based)
|
|
- [ ] Create Assignment model with Word document support
|
|
- [ ] Create Comment model for video and forum interactions
|
|
- [ ] Add audit fields (createdBy, createdAt, updatedAt, updatedBy)
|
|
- [ ] Generate Prisma client and push schema to database
|
|
- [ ] Create seed data for initial users and roles
|
|
|
|
### Phase 3: Authentication & User Management
|
|
|
|
- [ ] Implement Better Auth configuration with role-based access
|
|
- [ ] Create landing page with Login, Register, Mulai Sekarang buttons
|
|
- [ ] Implement basic registration (Name, Email, Password, Password Confirmation)
|
|
- [ ] Create role upgrade forms (Pendidik and Calon Pendidik registration)
|
|
- [ ] Implement login/logout functionality
|
|
- [ ] Create user dashboard with role-specific options
|
|
- [ ] Add authorization middleware for protected routes
|
|
|
|
### Phase 4: Core UI Components & Layout
|
|
|
|
- [ ] Create main layout with navigation (Beranda, Teori, Praktik, Template Makalah)
|
|
- [ ] Implement Navy (#000080), Gray (#A9A9A9), White (#FFFFFF) color scheme
|
|
- [ ] Add background.jpg with overlay effect
|
|
- [ ] Create AppDataView component for data tables
|
|
- [ ] Create AppForm component for forms
|
|
- [ ] Create ActionButton component for buttons
|
|
- [ ] Ensure responsive design and mobile-first approach
|
|
- [ ] Add skeleton loading states
|
|
|
|
### Phase 5: Video Management System
|
|
|
|
- [ ] Create video upload page with file/YouTube options
|
|
- [ ] Implement YouTube URL validation and embedding
|
|
- [ ] Create video player page with comments
|
|
- [ ] Implement Beranda page showing community videos
|
|
- [ ] Create video filtering (by uploader, latest, popular)
|
|
- [ ] Add administrator-specific video placement options
|
|
- [ ] Implement video storage and compression for local files
|
|
|
|
### Phase 6: Learning Content Management
|
|
|
|
- [ ] Create Teori page for theoretical content
|
|
- [ ] Create Praktik page for practical content
|
|
- [ ] Implement administrator-only content placement for Teori/Praktik
|
|
- [ ] Create Template Makalah page for document downloads
|
|
- [ ] Add content categorization and organization
|
|
- [ ] Implement content suggestion system for Pendidik
|
|
|
|
### Phase 7: Forum & Collaboration System
|
|
|
|
- [ ] Create Forum Umum for all users
|
|
- [ ] Create Forum Group/Kelas for Pendidik and Calon Pendidik
|
|
- [ ] Implement thread creation and reply functionality
|
|
- [ ] Add forum moderation features
|
|
- [ ] Create class-based discussion organization
|
|
- [ ] Implement rich text editor for forum posts
|
|
|
|
### Phase 8: Assignment & Document Management
|
|
|
|
- [ ] Create assignment creation system for Pendidik
|
|
- [ ] Implement Word document upload for Calon Pendidik
|
|
- [ ] Create revision system with document comparison
|
|
- [ ] Add assignment tracking and status management
|
|
- [ ] Implement notification system for assignments
|
|
- [ ] Create document download and management features
|
|
|
|
### Phase 9: Class Management System
|
|
|
|
- [ ] Create class creation and management for Pendidik
|
|
- [ ] Implement class joining system for Calon Pendidik
|
|
- [ ] Add class member management
|
|
- [ ] Create class-specific content organization
|
|
- [ ] Implement class analytics and reporting
|
|
- [ ] Add class approval workflows
|
|
|
|
### Phase 10: API Development
|
|
|
|
- [ ] Create user management API endpoints
|
|
- [ ] Create video CRUD API endpoints
|
|
- [ ] Create forum API endpoints
|
|
- [ ] Create assignment API endpoints
|
|
- [ ] Create class management API endpoints
|
|
- [ ] Implement proper error handling and validation
|
|
- [ ] Add authentication and authorization checks
|
|
- [ ] Create TypeScript interfaces for API responses
|
|
|
|
### Phase 11: Testing & Quality Assurance
|
|
|
|
- [ ] Run ESLint (0 errors, 0 warnings)
|
|
- [ ] Run TypeScript type checking (0 errors)
|
|
- [ ] Perform build test (successful compilation)
|
|
- [ ] Test authentication flows end-to-end
|
|
- [ ] Test CRUD operations functionality
|
|
- [ ] Test permission matrix and role-based access
|
|
- [ ] Test video upload and playback functionality
|
|
- [ ] Test forum and assignment workflows
|
|
- [ ] Perform responsive design testing
|
|
- [ ] Test with MCP Server for browser automation
|
|
|
|
### Phase 12: Documentation & Deployment
|
|
|
|
- [ ] Update README.md with project structure and features
|
|
- [ ] Document API endpoints and usage
|
|
- [ ] Create component documentation
|
|
- [ ] Add deployment configuration
|
|
- [ ] Perform final security review
|
|
- [ ] Optimize performance and loading times
|
|
|
|
## 🎯 Expected Outcomes
|
|
|
|
- [ ] Complete kreatiVortex platform with all required features
|
|
- [ ] Four-tier user role system with proper access control
|
|
- [ ] Video management with local and YouTube support
|
|
- [ ] Forum system for community and class discussions
|
|
- [ ] Assignment system with Word document support
|
|
- [ ] Class management and organization
|
|
- [ ] Responsive design with Navy/Gray/White color scheme
|
|
- [ ] Better Auth integration for secure authentication
|
|
- [ ] Comprehensive API with proper error handling
|
|
- [ ] Mobile-responsive and accessible design
|
|
|
|
## ⚠️ Risks & Considerations
|
|
|
|
- **Video Storage**: Local file storage may require significant server space and compression
|
|
- **YouTube Integration**: Direct URL embedding without API may have limitations
|
|
- **Document Processing**: Word document handling requires proper file type validation
|
|
- **Role Complexity**: Four-tier role system requires careful permission management
|
|
- **Performance**: Video streaming and large file uploads may impact performance
|
|
- **Security**: User data (especially NIM and documents) requires proper encryption
|
|
- **Scalability**: System must handle growing number of users, videos, and documents
|
|
|
|
## 🔄 Dependencies
|
|
|
|
- **Next.js 16+**: Core framework for the application
|
|
- **Better Auth**: Authentication and authorization framework
|
|
- **Prisma ORM**: Database management and migrations
|
|
- **TypeScript**: Type safety and development experience
|
|
- **shadcn/ui**: UI component library
|
|
- **Database**: PostgreSQL or MySQL for data storage
|
|
- **File Storage**: Local storage or cloud storage for videos and documents
|
|
- **YouTube API**: Optional for enhanced YouTube integration
|
|
- **Rich Text Editor**: For forum posts and content creation |