All projects

E-learning

CourseMate — E-learning Platform, Admin Portal & Android App

E-learning product across three surfaces: a React student app, a Material UI admin portal and an Android companion app on a shared Node/MongoDB API.

  • React.js
  • Vite
  • Material UI
  • Redux
  • React Native
  • Node.js
  • Express.js
  • MongoDB
  • REST APIs
  • nginx
Live demo
Course Mate
Client
CourseMate
Duration
Nov 2022 — May 2023
Category
E-learning

CourseMate is an e-learning platform built as three coordinated surfaces: the student-facing application at thecoursemate.com, an operations portal at admin.thecoursemate.com, and an Android companion app distributed as a build outside the store.

Both web applications are Vite-built React SPAs on Material UI with Redux for shared state, served by nginx and backed by a Node.js/Express API over MongoDB. Students browse the catalogue, enrol and work through lessons; administrators manage courses, content, cohorts and users from the portal, with the same API enforcing the rules for both.

Keeping the two web apps on one design system and one state pattern meant the admin portal could reuse most of the student app's building blocks instead of becoming a second product with its own conventions.

Key features

Course catalogue, enrolment and lesson delivery for students

Admin portal for course, content, cohort and user management

Android companion app for learning on mobile

Shared Node.js/Express REST API over MongoDB serving all three clients

Material UI design system reused across student and admin surfaces

Redux state layer with authenticated, role-aware routing

Screenshots

CourseMate — E-learning Platform, Admin Portal & Android App — screenshot

My role

Full-stack developer across the student app, admin portal and API.

  • Built React screens and shared Material UI components for both web surfaces

  • Modelled courses, enrolments and progress in MongoDB and exposed them over Express

  • Implemented authentication, role-aware routing and admin permissions

  • Supported the Android companion build against the same API

Challenges & solutions

Two apps that wanted to become two products. Admin portals drift into their own conventions quickly. Sharing the Material UI theme, form primitives and API client between the student and admin apps kept the maintenance cost of the second surface close to zero.

Progress tracking that survives a dropped connection. Lesson progress is written incrementally and reconciled server-side, so closing a tab mid-lesson does not lose a student's place.

Related projects

KnowledgePro Pakistan — Multi-Tenant Pharma Learning — coverE-learning / Pharma

KnowledgePro Pakistan — Multi-Tenant Pharma Learning

Multi-tenant e-learning platform for pharma field teams: one codebase serving separately branded Ferozsons, Chiesi and EnteroLibrary portals.

  • React.js
  • Vite
  • Tailwind CSS
  • shadcn/ui (Radix UI)
  • +5
Case details