MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More

Traversy Media

In this project, we will create a MERN stack app with a React SPA frontend. The main focus is authentication, but you will learn how to create a full-featured API, manage state with Redux Toolkit, and more.

Linode/Akamai – Get $100 Free For 60 Days
https://linode.com/traversy

Code:
https://github.com/bradtraversy/mern-auth

Blog Post – Part 1 (Backend):
https://www.traversymedia.com/blog/mern-crash-course-part-1

Blog Post – Part 2 (Frontend):
https://www.traversymedia.com/blog/mern-crash-course-part-2

12-Hour MERN Course:
https://www.traversymedia.com/mern-stack-from-scratch

Timestamps:
0:00 – Intro
2:58 – Linode Sponsor
4:18 – Getting Started
6:45 – Dependencies & Express Server
9:51 – Scripts & Nodemon
10:59 – .env File
12:52 – User Routes & Controller Setup
18:15 – Postman Workspace Setup
21:10 – Async Handler
22:37 – Custom Error Middleware
30:23 – User Controller Functions
33:14 – Connect To User Routes
37:20 – MongoDB Database Setup
44:50 – User Model
48:32 – Register User Endpoint
58:50 – Generate JWT & Save Cookie
1:06:29 – Auth User Endpoint
1:11:33 – Logout & Destroy Cookie
1:13:13 – Auth Protect Middleware
1:23:30 – Update User Profile Endpoint
1:28:11 – Starting The Frontend
1:34:15 – Concurrently Setup
1:37:43 – React Bootstrap Setup
1:40:00 – Header Component
1:42:30 – HomeScreen & Hero
1:44:54 – React Router Setup
1:53:21 – Login & Register Form UIs
2:05:47 – Redux Toolkit Setup
2:10:37 – Auth Slice
2:19:50 – API Slices
2:29:17 – Login Functionality
2:37:35 – React Toastify Setup
2:39:45 – Auth Header Links
2:44:01 – Logout Functionality
2:48:48 – Loader Component
2:51:52 – Register Functionality
2:57:39 – Start Profile
2:58:21 – PrivateRoute Component
3:02:50 – ProfileScreen Component
3:06:00 – Update Profile Functionality
3:11:15 – Prepare For Production
3:16:43 – Create A Linode/Server
3:18:32 – SSH Into Server & Provision
3:22:44 – Clone Files On To Server
3:28:07 – PM2 Setup
3:30:45 – NGINX Setup