Quick Summary

Amr Samir, Full Stack Developer & Technical Architect, built this project using React, Tailwind CSS, Node.js, Express, MongoDB. It demonstrates professional-grade implementation of modern web solutions with a focus on performance and scalability.

Skillora - Full-Stack LMS & Video Course Platform

8 Skills • 2026

A comprehensive learning management portal built with Express, React, and MongoDB, featuring signed Cloudinary video streaming URLs, nested curriculum models, student progress tracking, and PayPal course enrollments.

Live Demo View Code

demo-skillora.vercel.app

Slide 0 of 0

What this project demonstrates

Skills:

React Tailwind CSS Node.js Express MongoDB PayPal SDK Cloudinary TypeScript

Technical Specifications

Project Type: Web Application
Primary Stack: React, Tailwind CSS, Node.js
Deployment: Secure VPS / Cloud Infrastructure
Architecture: Modern Decoupled Architecture

Core Value Delivery

Delivering scalable, high-performance solutions with a focus on user experience and business growth.

Quick project inquiry

Send a simple inquiry directly from the project page without leaving for the hire page.

Project Overview

Skillora: Full-Stack LMS & Video Course Platform

Problem & System Context

Online learning platforms must protect paid video content from direct unauthorized downloads while delivering smooth, buffer-free playback across devices. Serving static public video URLs exposes premium content to URL sharing, while hosting videos directly on web application servers consumes excessive bandwidth and CPU.

Skillora was engineered as a full-stack Learning Management System (LMS) pairing a React frontend with a Node.js/Express backend, Mongoose/MongoDB data models, and a secure Cloudinary signed video streaming pipeline.

Architectural & Technical Implementation

1. Nested Curriculum Data Architecture

Source: Mongoose models

Organizes learning content hierarchically: Course → Modules → Lessons (Video / Text) → Quizzes
Each lesson documents duration, Cloudinary public asset ID, order index, and completion criteria.
Student enrollment records track completed lesson IDs, quiz scores, and timestamped certificate eligibility.

2. Secure Video Authorization via Signed Cloudinary URLs

Source: controllers/course.controller.ts

Premium video assets are stored as authenticated resources on Cloudinary, preventing direct public access without valid cryptographic signatures.
When a student opens a lesson player, the backend verifies the user's enrollment status against MongoDB.
If verified, the server generates a time-limited signed URL with an expiration timestamp: cloudinary.utils.sign_request({ public_id, timestamp, ... })
The signature expires after a short window, preventing link sharing outside the authenticated student session.

3. Student Progress & Course Completion Pipeline

As students finish videos or pass quizzes, progress events update the student's enrollment document in MongoDB.
The server computes overall course completion percentage dynamically: completionRate = (completedLessonsCount / totalLessonsCount) * 100
Unlocks the next sequential module once prerequisite lessons are completed.

4. Course Enrollment & PayPal Checkout Pipeline

Integrates the PayPal REST SDK to handle course purchases.
Upon payment execution approval, the backend creates an active Enrollment record linking the student ID with the purchased course ID.

Technical Challenges & Trade-offs

Video Link Tampering Protection: Using signed CDN streaming URLs ensures that media files remain protected without burdening the application server with direct video file streaming.
Nested Schema Performance: Deeply nested course schemas were indexed on course and module IDs to optimize query retrieval during lesson player transitions.