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
React Front To Back 2022
Sources: udemy, Brad Traversy
This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills. The first project (Feedback App) is st...
19 hours 57 minutes 45 seconds
Uber Eats Clone
Sources: Nomad Coders
Best Way to Learn to Code. We believe that the best way to become a developer is by doing clone coding. It is very easy to get bored and unmotivated in the begi
40 hours 22 minutes 44 seconds
Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js
Sources: Ryan Fitzgerald
Master the creation of full-fledged Chrome extensions from scratch to production! Learn how to develop powerful, functional Chrome extensions using a modern...
10 hours 3 minutes 45 seconds
MERN eCommerce From Scratch
Sources: udemy, Brad Traversy
There are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized eCommerce / shoppi...
14 hours 49 minutes 45 seconds