Learn The MERN Stack - Frontend Authentication | Redux Toolkit

In this video, we will create our frontend and add authentication using Redux Toolkit to manage our global state.

💻 Code:

👇 Full React 2022 Course With $12.99 promo:

👇 Website & Courses:

💖 Show Support

👇 Follow Me On Social Media:

Timestamps
0:00 - Intro & API Explanation
2:18 - Create Frontend Folder & Cleanup
7:23 - Page Components
9:20 - React Router Setup
12:30 - Header & Navigation
16:33 - Register Page
25:14 - Login Page
27:36 - Concurrently Setup
30:10 - Redux Start & Auth Slice
37:32 - Start User Registration
45:36 - Extra Reducers For Register
49:32 - Hook Up Register Form
1:00:45 - Logout Function
1:07:55 - Start User Login
1:09:30 - Extra Reducers For Login
1:10:20 -Hook Up Login Form

[patrickjreid]

I, for one, am super grateful that you did redux toolkit here! Thank you so frickin' much for all the hard work you do in this channel. To all the newer developers: I used to HATE Redux. Its one of the harder front end technologies to really get to like. BUT once you have a use case for it, Redux is AMAZING. This project doesn't NEED redux, but its easier to see Redux on a simpler project. Plus there are already a million React todo lists. The fact that Brad takes the opportunity to teach Redux here as well shows what a pro he is!!! Brad, you are my hero!

[CodewithAby]

I'm definitely going to re-watch this a few times...there's lot of information to take in, especially on redux.
Thank you so much for your fantastic tutorial.

[UmarMunir]

No one else teaches all the best practices and production level practices so we are stuck with figuring out how to implement what they teach in our personal projects since they themselves say "I wouldn't do this in a production level project" and they wouldn't show what they'd do in a production build. Traversy Media is the best resource because you not only teach so much better but you also fill all those gaps. What you teach is "actually useful" since you're showing the practices and structure you'd normally follow in your own projects. Love that!

[kr]

To remove the import for react just go to your settings and uncheck "Import React on Top" and that will fix it. Apparently they changed the behavior in V4 of the extension.

[dougiehawes]

I've been refreshing your homepage every couple of hours for the last day waiting for this video. I've always admired your work, and glad to see a fresh look which considers the recent changes to all the dependencies (esp, react-router-dom being a bit of a diva recently).

[cramsarmiento]

For those of you who got error 404 at 59:00 where you hook up Register form, just restart your server and client. I don't know why it work with Brad, but I did follow his process twice and got the same result. According to Google, it seems that when adding the proxy line in the frontend/package.json, you need to restart the app. I am not a pro, so if I have missed something or I am completely wrong with this, I would be very happy if someone would correct me. BTW this channel is awesome.

[aysiofficial]

Frankly speaking Brad is not just a good teacher, but also a nice content creater.
Respect!

[vikasni]

There is something special about this legend, even a hard topic becomes very easy when we see his videos

[bufootballa]

Quick note if using 'yarn' instead of 'npm' to run the 'client' command or the command w/concurrently. With yarn, you need to use '--cwd' instead of '--prefix' shown used with npm. The command to only run the client should be "yarn --cwd frontend start" while the command to run both the FE and BE servers w/concurrently should be "concurrently \"yarn client\" \"yarn run server\""

[mathreview]

you are the best and the most honnest when it come to all the details you provide in these incredibly well structure, easy to follow series. Thank you for all your efforts.

[filledaprilli]

I‘m grateful and going to cry because I find all I need to learn and learnt a lot in your channel!!

[odeddugma]

Brad, I must thank you for the last 3 videos. I bought your React course (and your bootstrap course as well) but didn't have the time to start. Tow days ago I got home assignment for a new position, requiring using Node, Express, React, and Redux. Your last videos are most helpful for my assignment (And I promise to start the full course ASAP).
You are the BEST teacher!!!
Thank you 🙂

P.S.
It might be a good idea to take some home assignments that were given for junior positions and solve them in a few videos or a course (I'll be the first to buy and recommend). It is practical for juniors looking for first positions.

[nozoke]

Hey everyone, at 8:40 to stop importing 'react' on the first line, open VS Code Preferences and type 'Import React On Top' into the search bar. Then uncheck that box and restart VS Code. Now there'll no longer be import React when using the 'rfce' shortcut.

This happened because of the extension update that removed underscores. Take care!

[mpb]

Putting these videos out faster than I can study them. Great stuff as always!

[stephensvetlovics]

Dude, you are awesome, you know this stuff so well, and you explain everything, even stuff most ppl wouldn't. it helps to understand it so much better. Thanks for all your time and effort!

[samdeng]

you are the one, I'm literally stuck at this part and was just searching for answer and I saw you post this video like 46 seconds ago.

[guyrandalf]

Brad is thanking us.. guys can you hear that? Brad is thanking you for staying this far!!! You're about to get me a react job and he's thanking me. How are you this humble Brad? You're the best!! Thank you so so much

[randomcell]

Very well explained, excellent teaching style with perfect pace and delivery. Brad, you were born to teach!

[alexbarkhatov]

43:24 is a perfect use case for optional chaining (?.). Thank you for your great content.❤

[victortang]

Three years ago I followed through your previous MERN stack series. Today I wanted to create a MERN stack app and I am here!