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
Solidity & Ethereum in React (Next JS): The Complete Guide
Sources: udemy
Create real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.
38 hours 47 minutes 24 seconds
React with TypeScript
Sources: ui.dev (ex. Tyler McGinnis)
We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as what you'll build during the course.
2 hours 53 seconds
React Query
Sources: ui.dev (ex. Tyler McGinnis)
Learn React Query with the official React Query course. WANT TO SKIP THE DOCS? There’s an easier way to master React Query. Our linear course is like having a smart, experienced...
7 hours 1 minute 30 seconds
React Router v5
Sources: ui.dev (ex. Tyler McGinnis)
The ability to take what you learn and apply it towards a production codebase.
3 hours 38 minutes 49 seconds
React Router v4
Sources: ui.dev (ex. Tyler McGinnis)
For good reason, React Router is the most popular 3rd party library in the React ecosystem. If you're using React, odds are you're also using React Router. React Router v4 intro...
6 hours 44 minutes 1 second