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

[TraversyMedia]

I mention it in the video, but I know people are going to ask "why not use Next.js"? Imo I think people should first learn how to build SPAs before moving to SSR-based frameworks. I think it gives them a lot of good foundational knowledge in React. Once they gain that, then move on to SSR (Next.js, Remix, etc).

[christostsm]

Brad, 4 years after i got my first dev job because of you, i am still here and i will forever be, wishing you and your family all the best <3 Thank you man <3

[TannerBarcelos]

Almost 3 years into my career and still love coming back to videos / tutorials like there. You are very senior and have lots of knowledge, and I always learn something new / remember things I forgot / don't use much these days (due to different work projects). Another solid, well structured video! Thanks Brad, hope you are doing good with your mental and physical health - that burnout was very real.

[rabahalishah]

One of the most soothing tutorial I have ever seen. No confusion just straightforward. The guide on web is amazing

[LoveEachDay]

I’ve been working through your JavaScript course side by side with my college work and it’s so frighten useful. Such a huge bang for your buck.

[EarlLewis]

Love the way you approach things and build things up piece by piece, so it's easy to follow how an app develops over time. Thank you!

[wingmanup]

Thanks Brad, because of your helpful tutorials Ive been able to learn full stack web development and I am currently in the process of starting a business!

[Answerx]

Brad, you are such a legend. Thanks for uploading this.

[davidmachek]

After completing this course 7 times I confirm this is a certified Brad classic

Edit: On a serious note, great course, Brad, keep it up.

[blue_berry_pie]

Thank Brad so much for this mearn auth video, I am learning backend nodejs and express and still need to solidify the knowledge in backend mern.

[gauravsharma]

Thankyou brad i got a job in Canada, i am from India. Only because of your this amazing YouTube channels, really a big thanks 👍. Keep doing you have lots of developer best wishes.

[JahidHasan-zlom]

Thats awesome, You have summarized my 2 years lesson in 3 hours 🤩

[bonchan]

Love from Philippines brad . I'm now working as a front end developer because of you and your videos .

[Amar]

Grateful for this Project.
I am learning a lot from you.
Thanks!

[nirmesh]

This is best Explanation ever. specially how you have handles error by express-handler stuff at starting. 🙂

[JohnDoe-tovr]

Hey Brad, your tutorials are seriously amazing! Thanks to your guidance, I've learned coding with so much confidence. Your dedication to excellence is truly inspiring. Keep up the fantastic work, lighting the way for us aspiring developers! 🌟

[MuhammadUsman-gkyx]

He is a master. I love the tutorials very up to date and easy wasy of teaching hard topics. Love from Pakistan

[ioanefaumui]

I was searching for this. Thank you once again!

[CodeWithLu]

Brad Traversy, you giving me great updates regularly

[numanakhtersiddiqui]

dk how this guy gets to know what i want to learn. Just in morning i was searching mern stack course, and in evening he posted😂