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

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 Code: Blog Post - Part 1 (Backend): Blog Post - Part 2 (Frontend): 12-Hour MERN Course: 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
Back to Top