Build Facebook clone with REACT JS AND THE MERN STACK

let's install and prepare the basic tools we need

Let's check some visual studio code extensions that's going to help you code faster and up the quality of your code.

Let's check some visual studio code extensions that's going to help you code faster and up the quality of your code.

we are going to prepare the basic frontend including all the assets we are going to need for the rest of the course

we are going to prepare the basic frontend including all the assets we are going to need for the rest of the course

in this tutorial we are going to prepare the server and work with basic routes and listening for live changes.

security of your server is one of the most important things to care for, and that's why cors are important to add a layer of security to prevent and only allow trusted sources to connect to your server.

routes present our endpoints so in this video we are going to setup the routes in a more professional and practical way and also dynamically add them to the server.

environment variables give us a new way of defining variables and protect our data and provide easier management to our important informations

the objective of this tutorial is to help you create and setup a MongoDb atlas account and connect it to our application

learn what JSON is and also understand the differences between HTTP response status codes

data modeling in MongoDb is key for defining the structure of the data that you wanna send to the database and also the validation and this particular video will be our first model created let's gooo

in this tutorial we creating the register function and also validate the user informations and using Regex to validate the email.

Live data validation is one of the coolest features because it allows you to verify data continuously from server to database and the username is a perfect example to learn with

explaining JSON web tokens and working with it.

Setup Google OAuth 2.0 to Access Google APIs

Finish register process and send emails

working on activating the user email

working on the login function.

let's setup react router-dom v6 which is a bit tricky to work with and that's the reason m using it to explain it for everyone who has a problem with it.

Redux helps apps to scale by providing a sensible way to manage state through a unidirectional data flow model. React Redux is conceptually simple and that's what we are learning about this video

working on login/register page

working on login/register page and learning about working with Formik which is the best tool to manage forms

working on login/register page and learning about working with Yup which is the best tool to validate forms

working on the responsiveness of the login/register page

working on the footer for the page/register page

Learn about code refactoring as it's one of the most important things in react js.

working on the register form.

learn how to work with and validate dates for the registration process.

let's work on the register form validation.

let's work on the register form error handling

let's finish working on the register form error handling

let's finish the register process

let's finish the login process.

let's start working on the header component.

let's continue working on the header

let's work on one of the most important functions that can be used in any sort of applications which is click outside of an element and then close or do any sort of work you want.

working on the header search menu

working on the main all menu

working on the user menu

let's continue working on the user menu

let's make sure the header is responsive

finish the header and fix all issues

this is such a high priority tutorial on protected routes to make sure all of our routes and pages are fully protected from none logged in users or the opposite  depending on the page.

let's work on the left home menu.

let's continue working on the left home menu.

Let's work on the right home page side.

let's work on stories.

let's work on the create post form that we gonna use to open the create post popup

let's make the home page fully responsive

let's make the home page fully responsive

Let's work on the authentification middlware which is gonna be vital for us to identify users when we send requests to the backend.

Let's work on the activate account process.

Let's work on the activate account process.

Let's work on the activate account process and fix some security issues.

let's work on the re-send verification code

let's work on the logout function.

let's work on the reset password process.

let's work on the reset password process.

let's work on the reset password process.

let's work on the reset password process.

let's work on finding the user that we want to reset the password for.

let's work on sending reset code email to reset password.

let's validate the reset code sent to the user.

let's work on change password functionality.

let's start working on the create post popup.

Let's work on the emoji picker in the best possible way and have full control on the textarea and emojis.

let's refactore the code and work add to your post  section and post button.

let's work on the preview images section.

let's work on the preview images section.

let's work on the preview images section, and work on images grid structure.

let's prepare the post model and create the create post function.

Let's setup cloudinary and merge it with our application and upload images.

Let's setup cloudinary and merge it with our application and upload images.

working on the post backgrounds.

hide open click outside and control popup visibility.

work on submitting post with background ,and add the loader.

create post popup error handling and show errors.

finally upload images and submit post with all different scenarios for a post.

finish post submit,also fixing errors,and validate data

get all posts from database and display them.

start working on the post, by building the header.

display post images and background.

work on post responsiveness and fix background color issue on the home page.
note : if your problem not been fixed, iw ill work on that later so don't worry

work on post reacts and actions.

wirk on create a comment adding emojis and also work on image.

work on the post menu.

work on the post menu.

we gonna start by getting the profile informations and also work on the function to get images directly from cloudinary.

setup profile in the frontend and get profile informations from backend.

let's work on the profile header and make few changes to the header and also work on the header section.

here we working on displaying the profile picture,some profile details and also the menu

let's work on the people you may know component

working on the create post section and posts grid section

Display profile posts and check if the profile is yours or a visitor

work on the photos component and the friends component and the footer

let's work on update the profile picture and work with the crooper, select the part of the image you want, zoom and update.

let's work on update the profile picture and work with the crooper,select the part of the image you want,zoom and update.

let's work on update the profile picture and work with the crooper,select the part of the image you want,zoom and update.

let's work on update the profile picture and work with the crooper,select the part of the image you want,zoom and update.

Get old profile pictures and others and  update using it.

work on the post for the updated profile picture.

let's work on update the cover picture and work with the crooper,select the part of the image you want,zoom and update.

let's work on update the cover picture and work with the crooper,select the part of the image you want,zoom and update.

Select old cover pictures and update using it.

let's work on the intro component and display profile details.

let's work on the intro component and display profile details.

let's work on the intro component and display profile details.

work on the edit details component.

work on the edit details component.

work on the edit details component.

Make profile fully responsive + fix home responsiveness.

we are going to go through all the popups we have created and make them fully responsive.

fixed scroll animation is such a cool way of fixing a side a moving the other one and scroll.