Build Full-Stack LMS App with MERN Stack | React + Node

Learn how to create a Fullstack LMS App from scratch using ReactJS, Express, NodeJS and MongoDB. This project is perfect for those looking to enhance their skills in web development and add a valuable project to their portfolio. Stay tuned for more exciting updates in future parts!

🙏 Support My Work 🙏
Hey friends, I’ve been putting in everything to keep creating free, high-quality content for you all. But honestly, managing everything financially has become tough lately.
If my videos have ever helped you, and you’re in a position to support, even a small contribution would mean a lot and help me keep going.

Thank you from the bottom of my heart for being part of this journey. 💙

TIMESTAMPS:
00:00:00 App Demo
00:31:42 Shadcn UI Setup
00:40:06 Build Login/Signup Page
01:11:09 Backend Setup
01:26:08 User Model & Controllers
02:10:32 Implement Redux (RTK Query)
02:53:48 Build Navbar Page
03:23:15 Build Hero Section Page
03:37:02 Setup React Router Dom
03:42:27 Build Courses Page
04:04:24 My Learning & Profile Page
04:33:49 Get & Update User Profile
04:58:55 Multer & Cloudinary Setup
06:02:18 Course Model & Controllers
06:14:12 Build Dashboard Page
06:35:14 Build Add Course Page
06:54:21 Add Course API in RTK query
07:07:27 Fetch Admin Courses
07:24:53 Build Course Edit Page
08:07:26 Edit Course & It's Controller
08:30:00 Get Course By Id
08:50:40 Add/Get/Upload/Edit/Remove Lectures
11:08:26 Publish & Unpublish Course
11:35:27 Get Published Courses
11:50:00 Build Course Details Page
12:17:23 Purchase Course, Stripe & Webhook
13:36:50 Build Course Progress Page
15:15:20 Build Search & Filter Courses Page
16:25:40 Display Dashboard Purchased Course
16:35:10 Implement Protected Routes
16:49:32 Light/Dark Mode & Fixing Some Bugs

Tags:
lms website with mernstack
lms app with nextjs
fullstack job portal with mern stack
mern stack projects

HashTag:
#mernstackproject
#reactjs
#nextjs

In 2024, it is the most practical web development course on YouTube. We will understand each concept theoretically as well as practically. After understanding the concepts, we will create projects and do fun challenges.

So make sure to subscribe to my channel, So you can't miss any updates.

Follow ME:

[patelmernstack]

🙏 Support My Work 🙏
Hey friends, I’ve been putting in everything to keep creating free, high-quality content for you all. But honestly, managing everything financially has become tough lately.
If my videos have ever helped you, and you’re in a position to support, even a small contribution would mean a lot and help me keep going.

Thank you from the bottom of my heart for being part of this journey. 💙

[vapstudents]

00:33:00 Started setting up the project files and installed mandatory packages like Vite, Tailwind CSS, etc.
00:41:00 Began creating the frontend for the login page.
00:55:00 Started working on the backend for the login page.
01:11:00 Connected the MongoDB database to store user details.
01:15:00 Installed other mandatory Node.js packages like Mongoose, dotenv, body-parser, etc.
01:16:20 Set up Node.js files including port configuration, MongoDB connection, and schema creation.
01:34:00 Began creating the user controller file, which contains the logic for creating a user.
01:49:00 Explained how to generate a token to store data in cookies and save user credentials.
01:55:00 Created a route file for API routes.
02:05:00 Tested APIs in Postman.
02:10:00 Installed and started using RTK Redux Toolkit.
02:16:00 Created the authSlice file to set the initial state.
02:21:00 Worked on backend logic for the signup page.
02:48:30 Explained how to use Toast notifications.
02:54:50 Started creating the navbar file.
03:09:00 Created a file for dark mode and continued with the navbar frontend.
03:24:00 Started creating the hero section.
03:43:00 Began creating the courses section component.
04:05:00 Set up the myLearning file to display details of courses purchased by students.
04:15:00 Started building the profile details page.
04:34:00 Implemented the logout functionality.
04:38:00 Explained how to update user details and performed testing.
05:00:00 Explained how to store photos on Cloudinary and continued updating user details.
05:29:00 Showed how to display a loading screen after saving data.
05:34:00 Finalized the login and signup functionality to ensure it works properly, including logout notifications and thorough testing.
06:02:00 Started writing backend logic for adding a new course and began creating a blueprint.
06:54:00 Created the course API.
07:07:00 Began writing backend code to fetch created courses and add lectures.
07:25:00 Started building the course edit page to publish courses after fetching them.
09:00:00 Set up a page for students to view lectures in a course and began writing backend code for adding, editing, and deleting lectures.
11:35:00 Set up functionality to display published courses and lectures on the frontend.
11:50:00 Started building the course details page to show description, topics, etc.
12:12:00 Decided to create a separate component for the purchase button for reusability.
12:14:00 Configured functionality to show course details based on the course ID when clicked.
12:17:00 Started working on the Stripe payment gateway, beginning with the schema. Tested all scenarios like pending status after payment and fixed issues. Started implementing webhooks.
13:36:00 Began building the course progress page with both frontend and backend.
15:15:00 Created a search component along with filter and sorting functionality, including testing.
16:26:00 Started building the admin dashboard to display total sales and revenue.

[terabaaphunmai]

bhai finally coded everything by myself through your video and not copy pasted it, thank you so much for this awasome content and also you are doing a great work for us . thanks a lot mr. patel

[sunilkumarsingh]

Tommorow is my Exam but I will definately complete this video for this incredible project made by awesome developer. ❤❤
Thanks mann !!

[webshihab]

Though i don't watch full video but i know you are working hard . Keep going brother . ❤

[MohammedHasmi]

Sir u r awesome 1 saal ke experience me koi itna Sara kaise sikha skta hai yr, just amazing bhai

[ukmvzbx]

18 hour video is no joke bro you did great

[Nahid-vr]

I don't know how to thank you. I can't tell you how many times I've searched for your channel on YouTube. However I requested you for this LMS project. You will do what you said. You kept your word. May God bless you . Also bless your lucky parents. Thank you so much from Dhaka, Bangladesh 🇧🇩

[EducationSimplified]

Going to do this project 3-5 times, till I'm able to do it completely on my own &
1. will add tap to forward or reverse functionality too. To enhance my learning.
2. Listen at x speed functionality too.

[swapnilyende]

This is the Project I was looking for. It is perfectly explained and created from scratch. You really worked hard. keep going liked, commented, and subscribed.

[vishnuitsrocking]

This is a fantastic project bro. First video I found from your channel; liked👍 Subscribed✌️❤️ Thank you for your hardwork 🎉🙏✨

[sumaiyahossainsurovi]

Best LMS Website with enriched features. Good work bro

[Amanbhaticold]

This is the one of the beat cllhanel on you tube

[TechMantra_Quest]

Incredible tutorial on practical web development

[EducationSimplified]

Into 7+ hrs today & still loving it.

[ahmadanjum]

Brother ky my ne sary project banain h qasam sy buht kuch sukhne ko milta h thank u soo much brother from Pakistan Good blesss u ❤

[aniketjha]

currently 11+ men u put so much effort in this ❤❤thanks

[EducationSimplified]

One Suggestion, there is YTer like you named Edroh, he keeps UI page & VS Code opened side by side whole time, to let know what we are building from the final page & what is getting build on the current project using CSS & Div's. This way it is more graphical learning of what we are building & how we are building. May apply on your upcoming projects.

[sandeep_gu]

I see many projects based on react. I found this video it was great to make a project in react.js in depth.👍👍

[code_ing_infinity]

WE ! THE STUDENT COMMUNITY SAY A LOT OF THANKS TO YOU SIR (BHAIYA) FOR CREATING SUCH PRECIOUS CONTENT THAT ENLIGHTENS OUR PATH FOR PROJECT DEVELOPMENT.
THIS COULD BE OUR FIRST MOVE TO THE INCREDIBLE APPS THAT WE WILL BUILD IN FUTURE. YOU ARE BUILDING OUR BASE FOUNDATION.
AGAIN A CRORE OF THANKS TO YOU BHAIYA