Full Stack Web Development Course [10] | ReactJS, NodeJS, MySQL - Auth in the Frontend

Hey everyone, this is the tenth episode of this series where I will show how to create a full stack web app!

Technologies:
- ReactJS
- NodeJS
- ExpressJS
- MySQL
- Sequelize

-
-

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[lokmanlife]

your video never long.. never get enough.. keep the series long.. always enjoy how you explain complicated stuff easily.. good luck on your final.. Liking systems where if the user liked already, it cant like it again or user can unlike it again..

[김경한-xh]

I was wandering about how to make website almost for a year. and I've never get any sense of it. but watching this series, now I finally got the sense. and now I know what should I do.
Thanks a lot for your video. and I think I'll watch your other video often.

[KyleKatarn]

I love this series and keep referring back to it. Even if I only have aspirations to be a front end developer, I would absolutely see knowing how to create and interact with the backend being an absolute positive in the eyes of any potential employer

[satyaprakashsahoo]

Hii Pedro, It doesn't matter if video is long, we love as you teach covering every aspects. Thanks.

[scooble]

I am learning a lot of advanced features of Javascript here, mainly because this is a practical application that is applicable to a real world scenario.
I am getting familiar with the syntax and structure the more I watch.
Some concepts and functionality start off a bit vague, and its my hope that as I work through them and see how they work, my understanding increases and it becomes less vague.
Repetition also helps, seeing you construct functions in different pages.
I got really stuck at 26:55 where you some how associated SetAuthState with the AuthContext context function, but then it became clearer when I realised (I think...correct me if I am wrong), was that you were 'destructuring' the contents of the context function AuthConext into an instance of the setAuthState function and that the 'value' attribute of the AuthContext component was set on the App.js file.
You clearly intuitively know how to code, however, my only suggestion coming from a learner such as myself, is that when you are using certain coding structures (such as destructuring as an example) that you should say what it is what you are doing. Its obvious to you as well as other experienced coders, but for learners like me, repetition of the descriptive terms makes it easier when doing research to enter the correct terminology into search engines and forums as well as discussing issues in the comments sections.

[shayan]

Thank you so much for everything man please don't stop making videos!

[PanlasangMotour]

I preferred this kind of video it is long but you explain it very well word by word so it can understand by the viewers what's happen on that code <3

[magicorpse]

Hi Pedro, really good video that taught alot of things. My suggestion would be to include Context API on the title, so if a person searchs for the term, your video appears.

Really well explained and even if the changes to the app seem minimal, now I can try to do the logout on my own because you describe the context API step by step.
Thank you :)

[timothy]

tip: i initially set the authstate to true instead of false so we dont get that flash of the nav bar buttons before it checks if there is a localstorage token or not.

[learnmakeit]

This is so awesome! Thank you so much! I am learning from Korea. You are influencing globally. Thank you teacher!

[ZTF]

Pretty simple explanations, got used to many aspects of react with this project so far !
thank you

[HI-wqvh]

Thank you for your time in making these videos. I really like how you explain things

[murtazahassani]

Hey bro thanks a lot for this video!
I a getting an Error, in 27:18 / 34:46
it says UNhandled Rejection (TypeError): SetAuthState is not a function. when I try to login

[akashdev]

Amazing Tutorial Pedro. Love the series!

[ROVAKAN]

A junior comes here and watch this playlist, he/she ends up a mid developer

[jorgeochoa]

Love it! :D Pretty Simple, but powerful!

[CCIBN]

it will be nice to show us how to display data using join, left, right tables, like want to see a table with a user how many posts and how many comments he has.:) just an idee

[lutfiikbalmajid]

thanks finally i know how to implement hasmany

[lefinancier.]

Hey Pedro thank you so much. can you add a video showing how to restart node server automatically when it crashes?

[scooble]

I noticed that in file you create a new req property called .user and make this equal to the validToken object.
Then, in the 'server/routes/Comments.js' file, you create a constant called 'username' that is equal to req.user.username.
Then you create a new property for 'comment' (comment.username) and making it equal to the constant called 'username'.

This seems a bit convoluted to me.
What is the drawback of doing it this way (within 'server/routes/Comments.js' file) without even having to assign the validToken object to req.user within the AuthMiddlewares.js file?;
comment.username = req.body.username; //Creates a username property within the 'comment' object and makes it equal to username property of the body that is part of the request argument.