# 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

- [x] Initialize Next.js 16+ project with TypeScript
- [x] Install and configure Better Auth framework
- [x] 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