Learning Management System (LMS)
( Next.js and Express.js)
Introduction
Welcome to the LMS App - a state-of-the-art Learning Management System designed to provide an interactive and comprehensive online learning experience. Built with Next.js and Express.js, this platform is equipped with advanced features for course management, student engagement, and secure, seamless user experiences.
Some UI Preview
Sign-up/sign-in page
clerk authentication for secure user
Courses page
Teacher/Admin to see course lists
Courses/:courseId page
Teacher/Admin to create, edit, delete, and see full detail course
Chapter page
Teacher/Admin to (create, edit, delete, and see full detail) chapter for a course
Analytics page
Teacher/Admin to analyze how much course are sold and how much revenue gained
Chapter page
Customers can enroll for a course, see free chapters
Stripe for payment process
Customers check out payment proccess
Chapter page
Customers can see course attachments, their progress after purchased the course
Dashboard page
Customers can see their progress courses, completed courses
Sidebar menu/alerts
responsive and user friendly interfaces
Key Features
Dynamic Course Creation & Management: Easily create and manage course content, including images and attachments.
Robust Authentication: Secure user authentication using Clerk.
Interactive Video Playback & Upload: Integrated with Mux for a smooth video experience.
Secure Payments: Stripe integration for handling course payments and subscriptions.
User-Friendly Interface: Modern, responsive design with Tailwind CSS.
Document and Image Uploads: Utilizing UploadThing for hassle-free file management.
Technologies Used
Frontend
Technologies Used:
- React 18.2.0
- Next.js 13.4.12
- Tailwind CSS 3.3.5
- React Hook Form 7.48.2
- React-Quill 2.0.0
- Recharts 2.10.3
- Lucide-React 0.294.0
Key Libraries:
- @clerk/nextjs 4.27.2: For secure user authentication.
- @mux/mux-node and @mux/mux-player-react 7.3.3 & 2.3.0: For video playback and uploads.
- @uploadthing/react 6.0.2: For handling document and image uploads.
- react-hot-toast 2.4.1: For elegant notifications.
- zustand 4.4.7: State management.
UI/UX Enhancements:
- Tailwind Merge 2.0.0: For optimizing Tailwind CSS classes.
- cmdk 0.2.0: Command menu interface.
- react-dropzone 14.2.3: Drag and drop file uploads.
- @tanstack/react-table 8.10.7: For building and managing tables.
- @radix-ui/react-dialog, @radix-ui/react-dropdown-menu, etc., for advanced UI components.
Features:
- Interactive and user-friendly interface.
- Seamless integration with video streaming and file upload services.
- Comprehensive course creation and management tools.
- Responsive design ensuring compatibility across various devices.
Development Tools:
- eslint 8.54.0: For code linting.
- postcss 8.4.31 and autoprefixer 10.4.16: For CSS processing.
- typescript 5.3.2: For type-checking.
Backend
Main Technologies:
- Express.js 4.18.2: The backbone of the server, handling routing and middleware.
- Mongoose 8.0.2: ODM for MongoDB, simplifying database interactions.
- Node.js: The runtime environment for executing JavaScript on the server side.
Database:
- MongoDB: NoSQL database used for storing application data.
Key Libraries and Middleware:
- dotenv 16.3.1: For managing environment variables.
- nodemon 3.0.2 (Development): For automatically restarting the server during development.
Features:
- Robust REST API endpoints for data retrieval and manipulation.
- Secure connection to the database with efficient query handling.
- Scalable architecture suitable for expanding features and user base.
Security and Authentication:
- Integrated security measures for API endpoints.
- Authentication and authorization logic to protect user data.
Development Tools:
- Various NPM packages for enhancing functionality and efficiency.
- Postman for testing and validating API endpoints.
Integrations:
- Stripe for payment processing: Integrated with Stripe's webhooks for handling transactions.
- Other third-party services as required by the application.
