Video Demo
Gallery
Ilmo interface gallery
A closer look at the learner experience, checkout flow, and admin course workflows.
01 / 16
Landing page
Project Overview
Ilmo is a Learning Management System (LMS) built with Next.js and TypeScript on the client for an SEO friendly and smooth user experience, paired with a robust Node.js/Express backend for core services. Admins can create and publish courses that learners can purchase and enroll in via a secure payment gateway (Stripe).
Learners can watch course videos through an integrated video player, access supporting materials from a dedicated resources section for each lesson, and actively engage by posting questions tied to specific sections. Users can also share feedback through course reviews, fostering a collaborative learning environment. Sign up and sign in are streamlined with Google OAuth and GitHub OAuth.
The platform includes a dedicated admin dashboard to manage courses and orders, view and moderate users, assign team moderators, and review analytics. From this dashboard, admins can also dynamically configure layout components such as the Hero section, FAQs, and Categories so the site can evolve without code changes.
Architecture Design
Frontend
- Next.js
- Tailwind CSS
- Redux Tooklkit Query
- Redux Tooklkit
- TypeScript
- Yup
- Formik
- Socket.IO Client
- Material UI
- ReCharts
Backend
- Node.js
- Express.js
- Redis
- MongoDB
- Socket.IO
- JWT
Integrations
- Cloudinary
- Stripe
- Nodemailer
- Vercel
- Render
ER Diagram
The ER diagram illustrates entites: Users, Courses, Orders, Layout, Notifications.
System Flow
The flow diagram illustrates user/learner flow journey and admin flow journey.
Key Features
Challenges & Solutions
Challenge: Implement highly secure authentication system
Solution: Used a two-token approach with Access and Refresh tokens. The access token expires every 5 minutes, while the refresh token revalidates it, ensuring high security with minimal user friction.
Challenge: Image Integration
Solution: Integrated Cloudinary to store images efficiently, organizing them into folders for easy updates and deletions.
Challenge: Smooth queries without reloading
Solution: Implemented Redux Toolkit Query (RTK Query) to manage API requests and data fetching dynamically, allowing seamless updates without page reloads.
Challenge: Cookie handling on deployment
Solution: Adjusted backend cookie configuration to support secure cookies over HTTPS and deployed networks.
Challenge: NodeMailer EJS templates not available on production
Solution: Ensured the static Mail folder was included in the build by modifying the build command to copy it to the distribution folder after building.