CourseSpace

Overview

The Problem Statement

• Security Vulnerabilities: Open endpoints leave courses vulnerable to unauthorized downloads, brute-force admin logins, and NoSQL injections.
• Media Management Complexity: Storing high-resolution course thumbnails and lesson videos locally slows down request speeds and balloons hosting costs.
• Cluttered UI/UX: Traditional dashboards are often visually dry and non-responsive, degrading the learning experience.
• Zero Production Observability: When server errors or bad requests occur in production, developers are left in the dark without physical logs.

The Solution

• A hardened backend protected by security headers (helmet), IP rate limiters, and zod schema validations.
• Offloaded media processing via integration with the Cloudinary CDN.
• A beautifully animated, theme-aware React frontend using vanilla CSS variables for glassmorphism and responsiveness.
• Production logging through physical rolling file logs using winston and morgan.

System Architecture & Schema Design

[Student / Admin Client] ──> [Frontend Client (React/Vite)]
                                    │ (HTTPS Requests)
                                    ▼
                     [Rate Limiter & Helmet Headers]
                                    │ (Validated Payload)
                                    ▼
                          [Express API Router]
                       ┌────────────┴────────────┐
                       ▼                         ▼
            [Admin Auth Middleware]    [User Auth Middleware]
             (Multer Buffer stream)              │
                       ├─────────────────────────┤
                       ▼                         ▼
               [Cloudinary CDN]           [MongoDB Atlas]
                                                 ▲
                                                 │
          [Winston Logger] <── [Morgan Stream] ──┘

• Users / Admins: Distinct collections keeping authentication credentials separated. Passwords are encrypted using bcrypt (salt rounds: 5).
• Courses: Tracks titles, descriptions, pricing, and creator IDs.
• Lessons: Linked to Courses with a 1-to-many relationship (ref: 'courses'), storing descriptions, video URLs, and order priorities.
• Purchases: Join-table collection mapping courseId to userId to authorize video stream access.

Key Engineering Highlights & Code Patterns

• A. Strict Payload Validation & Schema Protection (Zod): To prevent malicious database inputs and NoSQL injections, all incoming payloads are run through strict schemas before processing: const zodadminschema = z.object({ email: z.string().email(), password: z.string().min(6).regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])/), firstName: z.string().min(3).max(20), lastName: z.string().min(3).max(20) });
• B. Cloud Media Pipeline (Cloudinary + Multer): Course creators can upload custom course thumbnails. The backend intercepts the file buffer via multer and streams it directly to Cloudinary to keep the application stateless: adminRouter.post("/course", adminMiddleware, upload.single("image"), async function (req, res, next) { const adminId = req.userId; const { title, description, price } = createCourseSchema.parse(req.body); const course = await courseModel.create({ title, description, price, imageUrl: req.file.path, creatorId: adminId }); });
• C. Hardened API Security Middlewares: The server uses helmet to manage HTTP security headers and prevents DDoS/brute-force attacks with IP rate limiting: const rateLimit = require("express-rate-limit"); const limiter = rateLimit({ windowMs: 15 * 60 * 1000, max: 100, standardHeaders: true, legacyHeaders: false });
• D. Observability & Logging: All incoming HTTP requests and internal execution errors are logged directly to filesystem streams using winston and morgan: app.use(morgan('combined', { stream: { write: message => logger.info(message.trim()) } }));

Challenges Faced & Key Resolutions

• Challenge 1: Video Security & Embedded Content Control • Issue: Direct exposure of video files results in pirated content. • Resolution: Implemented a robust YouTube Player API overlay in React. Raw video identifiers are rendered through an custom player container, blocking context-menus and using sandboxed iframe attributes to prevent students from inspecting source links or leaving the viewport.
• Challenge 2: Decoupled Styling Without Layout Shifts (CLS) • Issue: Using massive UI component libraries caused cumulative layout shifts on slow networks and custom theme mismatches. • Resolution: Wrote structured Vanilla CSS from scratch using HSL design tokens. Set custom variables inside :root (for light theme) and [data-theme="dark"] to toggle global themes instantly with CSS transitions.

Results & Key Takeaways

• Observability: Added logging reduced troubleshooting time in production down to seconds by having searchable physical logs.
• Stateless Scaling: Moving course thumbnail processing to Cloudinary allowed the backend instances to scale horizontally without syncing local directories.
• Security Confidence: Zero payload validation bypasses during stress testing due to Zod's strict schema verification before database operations.
• Responsive Design: 100% mobile responsiveness achieved using CSS grid and flexbox, ensuring smooth usage on tablets, mobile devices, and desktops.