Creating a Complete LOGIN Page in React Js and Node Js FROM SCRATCH

Опубликовано: 11 Декабрь 2020
на канале: ToThePointCode

31,906

397

Creating a complete login page in React Js and Node Js from scratch.
GET SOURCE CODE 📀⬇️

🔴 Get Project Source Code - https://bit.ly/ttpc-react-login

🔴 All Other Source Codes & Support - https://bit.ly/ttpc-monthly-access

NOTES

🔵 Main packages used for the project frontend are Formik, Redux, Styled-components and Yup.

🔵 The React frontend is connected to a node js backend using the Axios API client.

🔵 After watching, you should know how to create a react frontend application (login page) and connect it to a node express backend.

LET’S WORK

👋 You can reach me at - https://www.tothepointcode.com/contact

CHECK OUT THESE HELPFUL TUTORIALS

🟡 Complete React and Node JS Login System -    • Login Page with React and Node Js + E...

🟡 Node JS Projects -    • Node JS Starter Guide

🟡 React Native Projects -    • React Native Starter Guide

🟡 Publishing Expo React Native App to Play Store Journey
   • Publish Expo React Native App to Play...

🟡 PHP Project
   • PHP CRUD Application ft MySQL, JQuery

TOOLS USED

🟠 Tool for my thumbnail & images - https://partner.canva.com/ttpc

🟠 Cheap website domain name - https://namecheap.pxf.io/ttpc

FOLLOW US ON:

🔵 Twitter -   / tothepointcode

🔵 Instagram - https://www.instagram.com/invites/con...

🔵 GitHub - https://github.com/tothepointcode

🔵 YouTube -    / @tothepointcode

CHAPTERS

00:00 Intro & Preview
01:00 Work Structure setup
04:29 Adding External font
05:48 Running the React project
06:07 Adding Styled-components
08:05 Adding the background & creating the Home page
18:59 Adding React Router
24:41 Creating the Login page
25:34 Adding Formik
40:32 Adding React Icons
45:11 Password eye button setup
50:41 Adding Yup for validation
01:02:48 Adding React Spinner
01:06:21 Creating the Signup page
01:08:33 Handling Confirm Password with Yup
01:12:29 Creating the Dashboard page
01:15:08 Setting up Routes with React Router
01:16:55 Authentication Setup with Redux
01:27:49 Login connection to Backend logic
01:28:36 Reference to Backend Videos
01:29:18 Changes to already created Backend
01:30:32 Committing and Pushing changes to Heroku
01:31:09 Adding Axios to link Frontend and Backend
01:38:19 Testing out the Login
01:44:40 Testing out the Signup
01:45:10 Working on Logout
01:47:38 Protecting the various Routes
01:55:10 Fetching details for the Dashboard
01:57:49 Final Testing and Conclusion

#tothepointcode #reactredux #formik