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
Join premium to watch
Go to premium
| # | Title | Duration |
|---|---|---|
| 1 | Welcome To The Course | 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 |
Similar courses
React Hooks
Sources: ui.dev (ex. Tyler McGinnis)
If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions ar...
3 hours 47 minutes 48 seconds
Node with React: Fullstack Web Development
Sources: udemy, Stephen Grider
Go beyond the basics of React and Redux! This course will teach you to combine the ultra-popular React, Redux, Express, and MongoDB technologies to build a fullstack web applic...
25 hours 36 minutes 19 seconds
Build Fullstack Trello clone: WebSocket, Socket IO
Sources: udemy
In this course we will build a Trello clone API using Angular, Typescript, NodeJS, Express, MongoDB and Socket IO . This course is fully focused on fast and deep dive into creat...
8 hours 49 minutes 48 seconds
Mastering REST APIs in Node.js: Zero To Hero
Sources: udemy
Have you ever wondered about how REST APIs work? Have you tried to understand all the components that are required to create REST APIs? Are you a developer comi
8 hours 31 minutes 29 seconds
The React practice course, learn by building projects.
Sources: udemy
Including three full practice project, a landing page, a Firebase project and a fullstack with Mongo DB and Node. Do you want to practice your React coding or just to learn it b...
43 hours 45 minutes 48 seconds