Build a Fullstack Login & Register Page with MERN (, mongo, express, bcrypt, jwt & more)

Join my Discord to talk and network about web development! 👇 Welcome to our tutorial on how to build a full-stack login and register page using MERN stack. In this video, we will cover step-by-step instructions on how to create a secure and functional login and register page using , MongoDB, Express, Bcrypt, JWT, and more. Whether you’re a beginner or an experienced developer, this tutorial is designed to help you gain a deeper understanding of the MERN stack and how it can be used to build powerful and secure web applications. Understand the folder structure of a Full Stack MERN project, authentication, authorization, encrypting user’s passwords for extra security, tracking user’s with a cookie using JSONwebtoken, utilize React-hot-toast package for professional looking notifications and much more. So, join us now and learn how to build a full-stack login and register page with MERN! Don’t forget to subscribe to our channel for more tutorials on web development, and feel free to leave any questions or comments in the section below. Thank you for watching! Timestamps: 0:00 Intro 0:51 Setting up folders/vite app 2:55 Set up frontend folders 5:12 React Router Dom setup 10:47 Create the login and register page 19:10 Set up backend folders/environment 24:39 Set up a GET endpoint route to test 33:54 Set up MongoDB database and connect it 44:00 Create a POST request for Register Page 54:43 Using React-Hot-Toast for notifications 1:02:58 Bcrypt Implementation 1:10:04 Create a POST request for Login Page 1:20:36 JSONWebToken 1:29:04 Create User Context with React Hook so we can track user 1:41:12 Create Mock User Dashboard 1:47:42 Testing out everything and outro
Back to Top