# CEPI LMS - System Architecture & Development Plan This document outlines the high-level architecture and step-by-step development journey for the CEPI Learning Management System. The plan converts CEPI's structured academic model into a scalable, secure, and highly engaging online platform. ## System Architecture Overview **Tech Stack:** - **Backend Framework:** Laravel (latest stable) for robust routing, ORM, and module management. - **Database:** MySQL. - **Frontend Stack:** Blade templating, Tailwind CSS, and Alpine.js (ensuring a lightweight, dynamic, and minimalist feel). - **Video Delivery:** Bunny.net with DRM/content protection logic. **Academic Hierarchy:** 1. **Course (Subject):** Top-level container (e.g., English Essay). 2. **Module:** Logical groupings of topics within a course (4-6 modules per course). 3. **Lecture (Video/Material):** Individual sessions, strictly nested within modules. **Role-Based Access Control (RBAC):** - **Admin:** Full system control, approves instructor content, manages users, and reviews analytics. - **Instructor:** Can create/upload courses & lectures but requires Admin approval to publish. - **Student:** Accesses purchased content, tracks progress, submits assignments, and engages in the community. --- ## High-Quality Security & Database Structure To ensure **enterprise-grade security** and prevent data harvesting, piracy, or enumeration, the database and system will enforce: - **UUIDs / ULIDs:** Using UUIDs instead of standard auto-incrementing IDs for external-facing models (Courses, Modules, Lessons, Enrollments) to prevent URL enumeration (e.g., guessing `id=5` to access hidden content). - **Strict Foreign Interfaces:** Strict Foreign Key constraints cascaded explicitly. - **Audit Logging:** The `admin_logs` and `user_devices` tables will track IP addresses, browser fingerprints, and sensitive access logs. - **Data Protection:** Soft deletes for users and courses meaning data is never permanently lost or irrecoverably destroyed by an error. - **Application Security:** Built-in Laravel CSRF protection, strict Content Security Policies (CSP), single-device session locking, rate limiting on login/payment endpoints, and Bunny.net Signed Tokens (1-hour expiry). --- ## UI/UX Design Language (Udemy-Style) The interface will be built adhering strictly to modern industry standards inspired by platforms like **Udemy**: - **Minimalist Aesthetic:** Clean backgrounds (whites and subtle grays), allowing the content and high-quality course thumbnails to pop. - **Typography-led Hierarchy:** High distinction between headers and secondary text using modern Sans-Serif font families. Clear focus states for accessibility. - **Distraction-Free Learning:** A high-contrast, dark-mode inspired lecture player view where the sidebar is strictly utilitarian (checkmarks and progress) and the video stays front and center. - **Responsive Layout:** Card-based grids for course catalogs that degrade gracefully across mobile/tablet formats. *(Note: We will incorporate the specific design files/assets you provide into this minimal structure as they become available).* --- ## Documentation Strategy (`docs/dev/`) To ensure seamless multi-agent/AI continuity, the development journey will be documented chronologically in the `docs/dev/` directory. Each phase of development corresponds to a specific markdown file. - *When working on a phase*, the AI will reference the previous files to maintain context. - *Upon completing a phase*, the corresponding `docs/dev/.md` will be updated with decisions made, schema details, route lists, and implemented features. --- ## 12-Step Development Roadmap ### [Phase 1: Project Bootstrap] (`docs/dev/01-setup.md`) Initialize Laravel, setup Tailwind+AlpineJS, secure DB connection, and configure Breeze/RBAC. Create the scaffold for the `docs/dev` structure. ### [Phase 2: Database Schema] (`docs/dev/02-schema.md`) Build all migrations with high-security practices (UUIDs, soft deletes). Construct precise relational tables. ### [Phase 3: Admin User & Role Management] (`docs/dev/03-admin-users.md`) Create the Admin user panel with CRUD, role assignment, and an activity log (IP logs/actions). ### [Phase 4: Course & Content Management] (`docs/dev/04-admin-courses.md`) Build Admin panel sections for creating/editing courses using the Subject -> Module -> Lecture flow. ### [Phase 5: Enrollment & Payment Admin] (`docs/dev/05-admin-enrollments.md`) Allow manual enrollments, manage access durations, view payment records, manage refunds, and access site settings. ### [Phase 6: Admin Analytics Dashboard] (`docs/dev/06-admin-analytics.md`) Build a dynamic analytics dashboard using Chart.js. Track enrollments, active users, revenues, and storage. ### [Phase 7: Bunny.net Video Integration] (`docs/dev/07-video-bunny.md`) Implement secure video hosting, DRM, and signed token expiry logic to strictly block unauthorized access. ### [Phase 8: Payment Gateway Setup] (`docs/dev/08-payments.md`) Build the abstracted payment layer (Stripe/EasyPaisa/JazzCash), manage checkout flow, and secure webhooks. ### [Phase 9: Public Frontend] (`docs/dev/09-public-frontend.md`) Convert reference designs into pixel-perfect Tailwind views (Udemy-like minimalism) for the Homepage & Auth Pages. ### [Phase 10: Student Dashboard] (`docs/dev/10-student-dashboard.md`) Create distraction-free lesson player, track progress, manage downloadable materials, and profile. ### [Phase 11: Instructor Dashboard] (`docs/dev/11-instructor-dashboard.md`) Provide a wizard for instructors to draft subjects/modules, pending admin review. ### [Phase 12: Security & Deployment] (`docs/dev/12-security-deploy.md`) Single-device enforcement, combat piracy (disable clicks), rate limiting, and production optimizations. --- ## User Review Required > [!IMPORTANT] > - Do you approve this updated architecture plan with the added security and UI/UX constraints? > - Once your reference designs are placed in a folder, please let me know the path! Should we jump immediately into **Phase 1**?