Full-Stack MERN Auth project: Build & Deploy (Reactjs, json web token, jwt, redux toolkit, cookie)

Описание: *Master Full-Stack Authentication with the MERN Stack: Build, Secure, and Launch Your Web Application*

Step into the realm of full-stack MERN authentication! This immersive course invites you to embark on a thrilling adventure, guiding you through the creation and deployment of a MERN stack web application complete with robust authentication capabilities.

Throughout this journey, we will assist you in crafting the authentication foundation of a MERN stack application. This module serves as an invaluable template for your future MERN apps, streamlining your development process and saving you precious time.

👩‍💻 Learn to Code (Save 20% Pro)
https://scrimba.com/s0fg0h412l?via=re...

Source code: https://github.com/sahandghavidel/mer...

Utilising the latest versions of React, MongoDB, Node.js, and Express, we'll cover crucial aspects to ensure your success:

1. Frontend Setup: We commence by installing React.js and seamlessly integrating Tailwind CSS. Delve into the power of React Router Dom's newest release to establish a robust routing system and create authentication pages that lay the groundwork for our feature-rich application.

2. Authentication Mastery: Our application supports email and password authentication via JSON Web Tokens, delivering secure user experiences. Additionally, we'll explore the integration of Google OAuth for seamless sign-ins.

3. Efficient State Management with Redux Toolkit: Discover the convenience of Redux Toolkit for streamlined state management, enabling you to effortlessly maintain global states.

4. Ironclad Profile Pages: Certain pages, such as the profile page, receive dual layers of protection – both on the client and backend sides – ensuring the utmost security for your application.

5. Dynamic Profile Management: Unleash the power to update user profiles, encompassing usernames, emails, and passwords. We'll even delve into image profile updates utilising Firebase Storage.

6.Account Deletion: Learn the art of safely deleting user accounts, complete with checks for JSON Web Token cookies.

7. Masterful CRUD Operations: Dive into the intricacies of Create, Read, Update, and Delete (CRUD) operations using MongoDB, enabling you to interact effectively with your database.

8. Deployment and Sharing: Finally, we'll harness Render to deploy your full-stack authentication app, all without cost. Share it with others or add it to your portfolio to showcase your newly acquired skills.

The prerequisites for this course are simple: a basic understanding of JavaScript and React. If your excitement matches ours in building this dynamic application, let's embark on your journey toward becoming a full-stack authentication expert!

Begin now and immerse yourself in the world of secure, efficient, and potent MERN authentication applications. Your skills will be in high demand – so let's construct and deploy together!

00:00 - Intro
01:48 - Project preview
04:22 - Install react js and tailwind css and create the first template
21:03 - Add routes and create pages
27:27 - Create header component
34:20 - Create and run the server
40:10 - Connect to the database
49:55 - Create user model
54:50 - Create a test API route
01:00:49 - Create sign up API route
01:18:59 - Add a middleware and a function to handle errors
01:25:50 - Complete sign up page UI
01:33:53 - Complete sign up page functionality
01:53:45 - Create sign in API route
02:11:41 - Complete the sign in page functionality
02:20:20 - Add redux toolkit
02:42:28 - Add redux persist
02:52:33 - Create and add OAuth component
03:29:00 - Update header component and make the profile page private
03:38:06 - Complete profile page UI
03:46:51 - Complete image upload functionality using firebase storage
04:16:03 - Create update user API route
04:32:38 - Complete update user functionality
04:46:47 - Add delete user functionality
04:54:10 - Add sign out user functionality
04:59:55 - Complete home and about pages
05:04:04 - Deploy to render