6.8 KiB
6.8 KiB
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