MERN Stack From Scratch
13h 32m 38s
English
Paid
Course description
We spend 12 hours creating this project from scratch. It includes a multi-step checkout process with PayPal integration, product search, rating & review, user profiles with order tracking, admin functionality and more.
Read more about the course
What you'll learn
- Create user interfaces with React & React Bootstrap UI library
- Manage state elegantly with Redux & Redux Toolkit
- Create an advanced API with Node.js, Express & MongoDB
- Authentication with JWT & HTTP-Only cookies
- Custom middleware for error handling, auth & more
- Mongoose models, controllers & routes
- Full stack structure & workflow
- Deploy to production, setup domain, SSL, etc
Watch Online
Watch Online MERN Stack From Scratch
0:00
/ #1: Welcome To The Course
All Course Lessons (95)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome To The Course Demo | 02:58 | |
| 2 | Course Project Intro | 07:02 | |
| 3 | ProShop Code Repo | 01:50 | |
| 4 | Premium Docs | 01:53 | |
| 5 | Getting Setup | 04:41 | |
| 6 | Create React App & Git Setup | 10:11 | |
| 7 | Header & Footer Component | 10:06 | |
| 8 | Custom Bootstrap Theme | 03:39 | |
| 9 | List Products | 08:46 | |
| 10 | Implement React Router | 08:04 | |
| 11 | Rating Component | 08:12 | |
| 12 | Product Details Page | 09:54 | |
| 13 | Full Stack Workflow Explanation | 03:42 | |
| 14 | Express Server & Initial Product Routes | 09:55 | |
| 15 | Nodemon & Concurrently | 04:29 | |
| 16 | Environment Variables | 03:31 | |
| 17 | Fetch Products | 09:46 | |
| 18 | MongoDB Atlas Setup | 05:04 | |
| 19 | MongoDB Compass Setup | 01:46 | |
| 20 | Connect With Mongoose | 04:42 | |
| 21 | Modeling Our Data | 13:58 | |
| 22 | Prepare Sample Data | 04:52 | |
| 23 | Seed Sample Data | 14:21 | |
| 24 | Getting Started With Postman | 05:34 | |
| 25 | Get Products From Database | 12:22 | |
| 26 | Custom Error Middleware | 07:34 | |
| 27 | Product Controller | 05:38 | |
| 28 | Redux & State Overview | 07:14 | |
| 29 | Redux Store & API Slice | 14:17 | |
| 30 | Products API Slice & Get Products Endpoint | 13:03 | |
| 31 | Get Product Details Endpoint Challenge | 05:28 | |
| 32 | Loader & Message Components | 05:55 | |
| 33 | Cart & Slice Reducer | 04:38 | |
| 34 | Add To Cart Function | 11:23 | |
| 35 | Qty & Add To Cart Handler | 15:59 | |
| 36 | Cart Utils File | 03:10 | |
| 37 | Item Count In Header | 06:01 | |
| 38 | Cart Screen | 21:49 | |
| 39 | Remove From Cart | 06:28 | |
| 40 | User Routes & Controllers | 20:19 | |
| 41 | User Email & Password Auth | 10:51 | |
| 42 | How JWT Works | 03:54 | |
| 43 | JWT HTTP-Only Cookie | 08:28 | |
| 44 | Auth Middleware & Endpoint | 14:12 | |
| 45 | Logout User & Clear Cookie | 03:15 | |
| 46 | User Register Endpoint & Encryption | 10:16 | |
| 47 | User Profile Endpoints | 06:15 | |
| 48 | Auth & User API Slice | 08:32 | |
| 49 | Login Screen | 07:36 | |
| 50 | Login Functionality | 19:39 | |
| 51 | User Logout | 06:58 | |
| 52 | User Registration | 08:54 | |
| 53 | Shipping Screen | 13:20 | |
| 54 | Private Route Component | 03:46 | |
| 55 | Checkout Steps Component | 05:39 | |
| 56 | Payment Method | 09:59 | |
| 57 | Order Routes & Controller | 15:43 | |
| 58 | Create & Get Orders | 05:25 | |
| 59 | Order API Slice & Start Order Screen | 08:16 | |
| 60 | Create & Get Orders | 18:20 | |
| 61 | Oder Page | 14:47 | |
| 62 | PayPal Setup & Mark As Paid | 05:53 | |
| 63 | React - PayPal Integration | 12:23 | |
| 64 | PayPal Buttons | 12:40 | |
| 65 | User Profile & Update | 15:46 | |
| 66 | Display Order History | 09:21 | |
| 67 | Admin Route Component | 07:13 | |
| 68 | List Orders For Admin | 06:51 | |
| 69 | Deliver Order Status | 06:07 | |
| 70 | List Products For Admin | 09:42 | |
| 71 | Creating Products | 09:01 | |
| 72 | Edit Product | 21:58 | |
| 73 | Update Product Bug Fix | 01:16 | |
| 74 | Multer & Image Upload Endpoint | 09:36 | |
| 75 | Upload Product Image - Frontend | 08:08 | |
| 76 | Delete Products | 07:13 | |
| 77 | Backend User Routes | 04:27 | |
| 78 | List Users For Admin | 07:25 | |
| 79 | Delete Users | 04:05 | |
| 80 | Update Users | 14:58 | |
| 81 | Create Reviews Backend | 04:45 | |
| 82 | Create Reviews Frontend | 13:06 | |
| 83 | Paginate Products | 07:14 | |
| 84 | Paginate Component | 09:27 | |
| 85 | Search Products | 09:54 | |
| 86 | SearchBox Component | 06:54 | |
| 87 | Product Carousel | 07:06 | |
| 88 | Page Titles | 07:14 | |
| 89 | Prepare For Production | 05:10 | |
| 90 | Deploy To Render | 09:58 | |
| 91 | Add Server IP To MongoDB Atlas | 01:10 | |
| 92 | Add A Custom Domain Name | 04:22 | |
| 93 | Wrap Up | 01:37 | |
| 94 | Small Fixes | 12:19 | |
| 95 | PayPal & Price Calculate Fixes | 14:00 |
Unlock unlimited learning
Get instant access to all 94 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
React for Beginners
Sources: codewithmosh (Mosh Hamedani)
React is the most popular JavaScript library for building front-ends. It was created by Faceook and is widely used for building web, mobile, and desktop apps.
7 hours 58 minutes 3 seconds
Web Performance Fundamentals
Sources: Nadia Makarevich
"The Fundamentals of Web Performance" focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React...
Build Telegram Bots with JavaScript: The Complete Guide
Sources: udemy
Telegram is a cloud-based instant messaging app that provides API to developers to create bots that interact with users. This course aims to provide you with complete set of kno...
5 hours 28 minutes 48 seconds
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
Sources: udemy
Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course, you will learn it from scratch at the example of a complete proje...
18 hours 45 minutes 10 seconds