MentorLab is a modern Learning Management System (LMS) designed to empower both educators and learners with a streamlined digital experience. Built using technologies like React, Vite, Tailwind CSS, ShadCN-UI, Node.js, Express.js, MongoDB, and Firebase, MentorLab offers two tailored portals for instructors and students:
- Instructors can create, manage, and share course materials in various formats, including PDFs, PowerPoint presentations, quizzes, and video links from YouTube.
- Students can discover courses, enroll, and learn at their own pace from a wide range of subjects.
With real-time updates and intuitive navigation, MentorLab enhances the learning process, making it accessible and enjoyable for everyone.
- Secure Authentication: Node.js and Express.js handle user authentication using JWT tokens.
- MongoDB: Manages all user-generated content and course data efficiently.
- Intuitive UI: Designed for ease of use for both instructors and students.
- Real-Time Learning: Dynamic updates ensure the learning environment remains engaging and up-to-date.
Here is the folder structure for the MentorLab project:
src
├── App.jsx
├── assets
│ ├── 404.png
│ ├── Girl.png
│ ├── five.jpg
│ ├── four.jpg
│ ├── one.jpg
│ ├── six.jpg
│ ├── three.jpg
│ └── two.jpg
├── components
│ ├── Landing
│ │ ├── AuthBg.jsx
│ │ ├── usePositionCursor.js
│ │ └── useScreenSize.js
│ ├── common-form
│ │ ├── form-controls.jsx
│ │ └── index.jsx
│ ├── instructor-view
│ │ ├── courses
│ │ │ ├── add-new-course
│ │ │ │ ├── CourseDetails.jsx
│ │ │ │ ├── CourseLectures.jsx
│ │ │ │ ├── LectureForm.jsx
│ │ │ │ └── NewCourse.jsx
│ │ │ └── index.jsx
│ │ └── dashboard
│ │ └── index.jsx
│ ├── modals
│ │ └── Logout.jsx
│ ├── student-view
│ │ ├── CourseDetails.jsx
│ │ ├── CourseProgress.jsx
│ │ ├── Header.jsx
│ │ ├── Home.jsx
│ │ ├── OpenCourse.jsx
│ │ ├── SelectCourses.jsx
│ │ ├── StudentCourses.jsx
│ │ └── YoutubeEmbed.jsx
│ └── ui
│ ├── button.jsx
│ ├── card.jsx
│ ├── checkbox.jsx
│ ├── dialog.jsx
│ ├── dropdown-menu.jsx
│ ├── input.jsx
│ ├── label.jsx
│ ├── scroll-area.jsx
│ ├── select.jsx
│ ├── skeleton.jsx
│ ├── slider.jsx
│ ├── switch.jsx
│ ├── table.jsx
│ ├── tabs.jsx
│ ├── textarea.jsx
│ ├── toast.jsx
│ └── toaster.jsx
├── config
│ ├── index.js
│ └── service.js
├── context
│ ├── auth-context
│ │ └── index.jsx
│ ├── firebase-context
│ │ └── index.jsx
│ └── instructor-context
│ └── index.jsx
├── index.css
├── lib
│ └── utils.js
├── main.jsx
└── pages
├── Auth.jsx
├── Error.jsx
├── Hero.jsx
├── Student.jsx
└── Teacher.jsxTo get started with MentorLab, follow these steps:
-
Clone the Repository:
git clone https://github.com/jayshreee10/MentorLab.git cd MentorLab -
Set Up Environment Variables:
cp .env.example .env
Edit the
.envfile with your Firebase credentials and necessary configurations. -
Install Dependencies:
npm install
-
Run the Development Server:
npm run dev
Access the app at
http://localhost:3000. -
Build the Application:
For production builds, use:
npm run build
The production-ready files will be in the
dist/directory. -
Set Up the Server-Side Code:
Clone and configure the server-side API for MentorLab:
git clone https://github.com/jayshreee10/MentorLabApi.git
MentorLab leverages the following libraries and tools to ensure optimal performance and a great user experience:
- ExpressJS: For backend API handling.
- MongoDB: For a robust, real-time database.
- Firebase: For secure storage and hosting.
- Tailwind CSS: For rapid and efficient UI development.
- ShadCN-UI: For modern UI components with Vite integration.
Here's what I plan to add in future releases:
- GitHub Integration: Enable seamless GitHub login for users.
- Profile Pages: Instructor and student profiles.
- Course Progress Tracking: Allow students to track their learning progress.
- Course Enrollment and Purchases: Streamline enrollment and payment.
- Creator Payment Page: View and manage payment details.
Stay tuned for exciting new features!
- Jayshree Sadangi - @Jayshree10