SmartLearnX is a comprehensive, production-ready Learning Management System (LMS) built with the MERN stack and TypeScript. Designed with a focus on modern SaaS aesthetics, exceptional user experience, and scalable architecture, this platform empowers educators to deliver content and students to learn effectively.
This project was developed to demonstrate full-stack proficiency, encompassing complex state management, scalable backend APIs, database design, asynchronous background job processing, and modern UI/UX principles.
📸 Tip for Recruiter/Hiring Manager: Watch the Demo Video here or check out the Live Deployment. (Add your links here)
- Immersive Lesson Experience: Split-view mode for video and notes, responsive layouts, and a distraction-free environment.
- Smart Notes System: Timestamped video notes allowing users to jump straight back into key moments of a lecture.
- Gamification & Analytics: Study streak counters, achievement badges, and certificate tracking to keep users motivated.
- Performance Analytics: Visual learning roadmaps, peer comparisons, and study schedule planners.
- Comprehensive Dashboard: Manage users, courses, and platform analytics with real-time data visualizations.
- Advanced Media Handling: Upload local files, embed YouTube/Vimeo, and manage PDFs seamlessly.
- AI Integration: Leverages Google Generative AI & HuggingFace for intelligent content generation/processing.
- Job Queues: Uses BullMQ and Redis for robust background task processing (e.g., email notifications, media processing).
- Security & Authentication: Secure JWT-based authentication, password hashing with bcrypt, and comprehensive input validation (Zod).
- Accessible UI Component System: Built on Radix UI primitives ensuring WCAG 2.1 AA compliance.
- Framework: React 18 with Vite
- Language: TypeScript
- Styling: Tailwind CSS, Radix UI, Framer Motion (for micro-interactions)
- State & Data Fetching: React Query (
@tanstack/react-query), Axios - Forms & Validation: React Hook Form, Zod
- Runtime: Node.js & Express.js
- Language: TypeScript
- Database: MongoDB with Mongoose
- Caching & Queues: Redis, BullMQ
- Authentication: JWT, bcryptjs
- Emails: Nodemailer
Follow these instructions to run the project locally.
- Node.js (v18 or higher)
- MongoDB (local or Atlas cluster)
- Redis (for BullMQ background job processing)
-
Clone the repository
git clone https://github.com/Iammilansoni/eduknit-learn.git cd eduknit-learn -
Setup Environment Variables Create
.envfiles in both thefrontendandbackenddirectories based on their respective.env.exampletemplates. -
Install Dependencies The project has a convenient script to install everything from the root folder:
npm run install:all
-
Start the Application You can run both the frontend and backend concurrently.
Running locally:
# Terminal 1 - Start the Backend npm run dev:backend # Terminal 2 - Start the Frontend npm run dev:frontend
Using Docker:
# If docker-compose.yml is configured for both services docker-compose up -d
- Minimalism with Purpose: Clean layouts with intentional whitespace focusing on the content hierarchy.
- SaaS-Grade Aesthetics: Modern gradients, glass morphism, and a professional color palette inspired by tools like Linear and Vercel.
- Micro-interactions: Smooth Framer Motion transitions and engaging loading states provide a premium feel.
- Component-Driven Development: A fully custom Design System built from scratch, integrating headless accessible UI components.
I am actively looking for a Full Stack Developer / Frontend Developer role. I am passionate about building scalable web applications with great user experiences. If you are hiring or just want to chat about this project, let's connect!
- Portfolio: Your Portfolio Website
- LinkedIn: Milan Soni (Update link if different)
- GitHub: Iammilansoni
If you liked this project and found it helpful, please give it a ⭐!