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
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
Fullstack Node.js: The Complete Guide to Building Production Apps with Node.js
Sources: fullstack.io
The Fullstack Node.js book is the complete guide to building fast, production-ready Node.js apps
Server side rendering with Next + React
Sources: udemy
Do you want to learn the whole process of building a server side React App ?. This is the course for you. We will start from the very beginning, from "I don't even know how to u...
29 hours 43 minutes 19 seconds
Doctor Appointment Booking App with React ,Firebase , ANT D
Sources: udemy
The course covers many aspects of application development, including Firebase integration, user authentication, creating separate user interfaces for administrators and regular ...
5 hours 45 minutes 20 seconds