🚀 Mission Control Documentation
Complete technical documentation for the Mission Control feature - a space-themed course management interface that displays both enrolled courses and free courses with gamified elements.
📋 Feature Overview
Core Functionality
- • Displays enrolled courses from user enrollments
- • Shows free courses marked with payment_type = "free"
- • Space-themed UI with mission cards and difficulty indicators
- • Pagination for course navigation
- • Progress tracking with visual progress bars
- • FREE badge for free courses
Technical Stack
- • React/Next.js for frontend
- • Tailwind CSS for styling
- • Supabase for database and authentication
- • Custom hooks for data fetching
- • API routes for backend logic
- • Database migrations for schema changes
Frontend Components
📄 app/components/MissionControl.tsx
Main Mission Control component that displays enrolled and free courses in a space-themed interface
Features:
- • Space-themed UI with gradient backgrounds and holographic effects
- • Displays both enrolled courses and free courses
- • Pagination for course navigation
- • Mission difficulty indicators (Easy, Medium, Hard)
- • Progress tracking with visual progress bars
- • FREE badge for free courses
- • Responsive design with hover effects
Key Functions:
- • MissionCard: Individual course display component
- • getMissionIcon: Maps course icons to space-themed emojis
- • getMissionDifficulty: Calculates difficulty based on progress
- • useEnrolledCourses & useFreeCourses: Data fetching hooks
Custom Hooks
📄 app/hooks/useEnrolledCourses.ts
Custom React hook for fetching courses the user is enrolled in
Features:
- • Fetches courses based on user enrollments
- • Handles authentication via Bearer token
- • Error handling and loading states
- • Caches data to prevent unnecessary API calls
Key Functions:
- • fetchEnrolledCourses: Main data fetching function
- • Error handling for network and authentication issues
- • Loading state management
📄 app/hooks/useFreeCourses.ts
Custom React hook for fetching free courses from the database
Features:
- • Fetches courses with payment_type = "free"
- • Enriches courses with modules, lessons, and learning outcomes
- • Error handling and loading states
- • No-cache policy for real-time data
Key Functions:
- • fetchFreeCourses: Main data fetching function
- • Error handling for API failures
- • Loading state management
API Routes
📄 app/api/courses/enrolled/route.ts
API endpoint for fetching courses the user is enrolled in
Features:
- • Dual authentication support (cookies and Bearer tokens)
- • Fetches enrollments and maps to courses
- • Separates free and paid program enrollments
- • Includes additional free courses by title/category
- • Comprehensive error handling and logging
Key Functions:
- • GET: Retrieves enrolled courses with complete details
- • Authentication handling with fallback mechanisms
- • Course filtering logic for enrolled and free courses
- • Data enrichment with modules and learning outcomes
📄 app/api/courses/free/route.ts
API endpoint for fetching all free courses from the database
Features:
- • Filters courses by payment_type = "free"
- • Enriches courses with complete module and lesson data
- • Transforms data to match frontend expectations
- • Comprehensive error handling
Key Functions:
- • GET: Retrieves all free courses with complete details
- • Data transformation for frontend compatibility
- • Module and lesson enrichment
- • Learning outcomes integration
Database & Migrations
📄 supabase/migrations/20250120000001_add_payment_type_to_courses.sql
Database migration to add payment_type column to courses table
Features:
- • Adds payment_type VARCHAR(20) column with CHECK constraint
- • Sets default value to "paid"
- • Updates existing courses with appropriate payment types
- • Creates index for efficient filtering
Key Functions:
- • ALTER TABLE: Adds payment_type column
- • UPDATE: Populates existing courses with payment types
- • CREATE INDEX: Optimizes payment_type queries
Utility Scripts
📄 scripts/apply_payment_type_migration.cjs
Node.js script to apply payment_type migration to database
Features:
- • Connects to Supabase using environment variables
- • Updates existing courses with payment_type values
- • Verifies migration results
- • Tests free courses query functionality
Key Functions:
- • applyPaymentTypeMigration: Main migration function
- • Course categorization logic
- • Verification and testing procedures
⚙️ Technical Specifications
UI/UX Design
- • Theme: Space-themed with purple/blue gradients
- • Animations: Hover effects, pulse animations, gradient transitions
- • Responsive: Mobile-first design with grid layouts
- • Accessibility: Semantic HTML, keyboard navigation, screen reader support
Data Flow
- • Auth: Dual method (cookies preferred, Bearer token fallback)
- • Caching: No-cache for real-time data, client-side state management
- • Error Handling: Graceful degradation, user-friendly error messages
- • Loading: Skeleton loading, progress indicators
Performance
- • Pagination: 2 courses per page to reduce initial load
- • Lazy Loading: Components load data on mount
- • Optimization: Memoized components, efficient re-renders
📝 Implementation Notes
Database Schema: The payment_type column was added to the courses table to distinguish between free and paid courses. This enables the Mission Control to display both enrolled courses and any free courses available to all users.
Authentication Strategy: The API routes support both cookie-based authentication (preferred) and Bearer token authentication (fallback) to ensure compatibility with different client implementations.
Data Enrichment: Courses are enriched with modules, lessons, and learning outcomes to provide complete information for the frontend display. This is done at the API level to minimize client-side processing.
Error Handling: Comprehensive error handling is implemented at multiple levels - API routes, custom hooks, and UI components - to ensure graceful degradation and user-friendly error messages.