Build Facebook clone with REACT JS AND THE MERN STACK

Build Facebook clone with REACT JS AND THE MERN STACK, available at $74.99, has an average rating of 3.78, with 159 lectures, based on 524 reviews, and has 4280 subscribers.

You will learn about Build a fully functional Advanced Social Media Facebook clone application version 2022 Master react js and all of its secrets and tricks and become comfortable using it for you frontend work Build a scalable strong backend using node js and express js Learn how to work with Mongodb and how to add ,update, remove and query like a pro. Learn how to use Cloudinary to store your images in a new brilliant way and how to upload, search, filter and open a new perspective on working with Cloudinary. Build a strong authentication system where you can register, login ,reset password Build a mailing system from scratch to send emails to the user for email verification links and reset code password. Strong advanced form validation using Formik and Yup and learn about the best form validation techniques used Master working with dates on an other level you have not done before and learn how properly to verify age by year, month, and day Live data validation from the database to make sure your data (like username) is unique and create a looping function to update it every time Learn how to schedule requests to the database every specific date you want or reputably and we will use that to remove all unverified users after a month Learn how to work with JSON web tokens, cookies… Learn how to use react redux store to have a global store shared across all of our application. Learn and master React router dom v6 and clear all the troubles people have with it. Learn how to create protected routes and secure your application and pages. A fully responsive application in all different devices, and learn advanced tricks or responsiveness. Learn how to professionally add dark mode to your application and have a switcher to switch between light and dark mode. Learn how to work with useState, useReducer, useEffect, useRef, useCallback, event Listeners Learn how to create reusable functions for like toggling, clicking outside, switching… In this application you will have a Home page where you have your menus and list of posts for people you follow or friends with where you can infinitely scroll. Every user will have a profile page just exactly like facebook cover, profile picture, details, photos, friends, posts You can update your cover with old covers you had or a new image using a crooper to crop and zoom and select the part of image you want So basically you will learn how to work with images crooping, zooming, flipping, rotating You can update your profile picture same as cover you can select and zoom, crop…. When you update your cover or profile picture a post will automatically get created that says user updated his/her profile/cover picture. You can create a post using text, emojis ,background, images in a well organized manner just the same as facebook You can react on a post with all different reacts, unreact, change your react and see all the changes live directly. You can save/unsave a post,download its images, delete it… You can comment with text , emojis and also using pictures and see the added comments directly sorted and also show more comments functionality. You can add and edit your details like othername, bio, job, workplace, relationship etc… and they will be visible on your profile and others can see it. We will have a friendship system just like facebook, you can add friend,/cancel request, follow/unfollow, accept request/delete request, unfriend… You will have a friends page where you can see the friend requests you have, the friend requests you sent, and your list of friends also We also add a live search functionality where you can search for other users and they will get stored in your search history and you always can remove them. This course is ideal for individuals who are Beginner web developer or Junior web developer or React js developer or Node js developer or web developer It is particularly useful for Beginner web developer or Junior web developer or React js developer or Node js developer or web developer.

Enroll now: Build Facebook clone with REACT JS AND THE MERN STACK

Summary

Title: Build Facebook clone with REACT JS AND THE MERN STACK

Price: $74.99

Average Rating: 3.78

Number of Lectures: 159

Number of Published Lectures: 159

Number of Curriculum Items: 159

Number of Published Curriculum Objects: 159

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will Learn

Build a fully functional Advanced Social Media Facebook clone application version 2022
Master react js and all of its secrets and tricks and become comfortable using it for you frontend work
Build a scalable strong backend using node js and express js
Learn how to work with Mongodb and how to add ,update, remove and query like a pro.
Learn how to use Cloudinary to store your images in a new brilliant way and how to upload, search, filter and open a new perspective on working with Cloudinary.
Build a strong authentication system where you can register, login ,reset password
Build a mailing system from scratch to send emails to the user for email verification links and reset code password.
Strong advanced form validation using Formik and Yup and learn about the best form validation techniques used
Master working with dates on an other level you have not done before and learn how properly to verify age by year, month, and day
Live data validation from the database to make sure your data (like username) is unique and create a looping function to update it every time
Learn how to schedule requests to the database every specific date you want or reputably and we will use that to remove all unverified users after a month
Learn how to work with JSON web tokens, cookies…
Learn how to use react redux store to have a global store shared across all of our application.
Learn and master React router dom v6 and clear all the troubles people have with it.
Learn how to create protected routes and secure your application and pages.
A fully responsive application in all different devices, and learn advanced tricks or responsiveness.
Learn how to professionally add dark mode to your application and have a switcher to switch between light and dark mode.
Learn how to work with useState, useReducer, useEffect, useRef, useCallback, event Listeners
Learn how to create reusable functions for like toggling, clicking outside, switching…
In this application you will have a Home page where you have your menus and list of posts for people you follow or friends with where you can infinitely scroll.
Every user will have a profile page just exactly like facebook cover, profile picture, details, photos, friends, posts
You can update your cover with old covers you had or a new image using a crooper to crop and zoom and select the part of image you want
So basically you will learn how to work with images crooping, zooming, flipping, rotating
You can update your profile picture same as cover you can select and zoom, crop….
When you update your cover or profile picture a post will automatically get created that says user updated his/her profile/cover picture.
You can create a post using text, emojis ,background, images in a well organized manner just the same as facebook
You can react on a post with all different reacts, unreact, change your react and see all the changes live directly.
You can save/unsave a post,download its images, delete it…
You can comment with text , emojis and also using pictures and see the added comments directly sorted and also show more comments functionality.
You can add and edit your details like othername, bio, job, workplace, relationship etc… and they will be visible on your profile and others can see it.
We will have a friendship system just like facebook, you can add friend,/cancel request, follow/unfollow, accept request/delete request, unfriend…
You will have a friends page where you can see the friend requests you have, the friend requests you sent, and your list of friends also
We also add a live search functionality where you can search for other users and they will get stored in your search history and you always can remove them.

Who Should Attend

Beginner web developer
Junior web developer
React js developer
Node js developer
web developer

Target Audiences

Beginner web developer
Junior web developer
React js developer
Node js developer
web developer

In this course you will learn how to build an advanced social media Facebook clone application (version 2022) and master working with React js , Node js, Express js, Mongodb and many many other tools we will use through the course.
-So as start we will build a strong authentication system so you can register, login and reset password, we will also have a validation system for register using Formik and Yup with friendly error messages to verify name to be a certain length or free from special characters, validate email and password, validate dates to verify age, username will be generated automatically and we will make sure it unique.
-We are also creating a mailing system where we will send verification links and reset password codes to the user, and directly after registering the user gets a verification link to activate account, so we are also learning how to create html emails.
-We have a home page where all posts for the people you follow or friends with will be displayed mixed with your posts and ordered from newest to oldest.

-You can create a post using text, emojis ,backgrounds, images and done beautifully dame as Facebook exactly.

-You can react on a post and change react unreact, use like button to like, unlike and remove existing react, also reacts will be displayed and ordered and any react you or remove will affect that live without refresh.
-You can comment using text, emojis and also pictures also comments will be ordered and always updating directly after submit.
-you can save/unsave post, download post images, delete post…
-We will have all sort of validation for file upload for size and type.
-You will learn how to crop, zoom, rotate, flip images using crooper.
-You can update your cover picture using old cover pictures or a new image with the option to crop zoom and select the part of image you want to use and after submit directly it will create a post that says user updated his/her cover picture.
-You can update your profile picture using old cover pictures or a new image with the option to crop zoom and select the part of image you want to use and after submit directly it will create a post that says user updated his/her profile picture and you can also use text and emojis.
-Every user have its own profile, where all details displayed from cover, profile picture , details (othername, bio, job, workplace, relationship…), photos, friends, posts
-You can update all your details and see changes live directly.
-We will use Cloudinary to upload our images in a new creative way, you will be impressed.
-We have a full friendship system whe you can add friend, cancel request, accept request, delete request, unfriend, follow, unfollow
-Also we have a friends page where you can mage all your requests and friends.
-We have live search functionality as you type new results appear, also any user you click will be added to your search history and it’s also will be displayed in order by the latest clicked on.
-We will use skeleton loaders while page loads or while we get data from backend and also using all different kind of loaders across our app.
-We will have protected routes.
-We will use react redux store to setup a global store to share data across all components.
-We will use react router dom v6 explained in details.
-We will work with cookies and JSON web tokens to store data temporarily.
-we will use many react js functions like useState, useEffect, useReducer, useRef, useCallback, event listeners and also create custom hooks.

Course Curriculum

Chapter 1: Welcome

Lecture 1: Welcome to the course, FULL SHOWCASE OF THE APPLICATION

Lecture 2: Very important update for students with very small screens

Chapter 2: Setup project

Lecture 1: Install and prepare the necessary tools

Lecture 2: Let's check some visual studio code extensions

Lecture 3: Let's check some visual studio code extensions (for small screens)

Lecture 4: Let's setup the basic frontend

Lecture 5: Let's setup the basic frontend (for small screens)

Lecture 6: Let's setup the basic backend (prepare the server)

Lecture 7: Let's setup the basic backend – prepare the server (for small screens)

Lecture 8: Cors fully explained and setup with the server

Lecture 9: Cors fully explained and setup with the server (for small screens)

Lecture 10: Let's setup routes

Lecture 11: Let's setup routes (for small screens)

Lecture 12: Environment variables

Lecture 13: Environment variables (for small screens)

Lecture 14: Let's setup a MongoDb Atlas Account and connect to our application

Lecture 15: Let's setup a MongoDb Atlas Account and connect to our app (for small screens)

Lecture 16: Working with JSON and explaining HTTP response status codes

Lecture 17: Working with JSON and explaining HTTP response status codes (for small screens)

Chapter 3: Authentification and send emails (backend)

Lecture 1: Let's setup the User modal

Lecture 2: Let's setup the User modal (for small screens)

Lecture 3: Register and validate data and using Regex to validate email

Lecture 4: Username live validation

Lecture 5: JSON web tokens

Lecture 6: Setup Google OAuth 2.0 to Access Google APIs

Lecture 7: Finish register and send emails

Lecture 8: Activate email

Lecture 9: Login

Chapter 4: Authentification frontend

Lecture 1: Let's setup react router dom

Lecture 2: React Redux store explained and full setup

Lecture 3: Login an Register page part 1

Lecture 4: Login and Register page part 2 (Formik)

Lecture 5: Login and Register page part 3 (Yup)

Lecture 6: Login and Register page part 4 (responsiveness)

Lecture 7: Login and Register part 5 Footer

Lecture 8: Learn about code refactoring

Lecture 9: Register form

Lecture 10: Working with dates for birthday

Lecture 11: Register form validation

Lecture 12: Register form error handling

Lecture 13: Finish register error handling and fix errors

Lecture 14: Register submit

Lecture 15: Login submit

Chapter 5: Header

Lecture 1: Header base part 1

Lecture 2: Header base part 2

Lecture 3: Click outside elements and close

Lecture 4: Search menu

Lecture 5: All Menu

Lecture 6: User menu part 1

Lecture 7: User menu part 2

Lecture 8: Responsive Header

Lecture 9: Finish Header and fix issues

Chapter 6: home

Lecture 1: Protected routes (very important ! )

Lecture 2: Left home menu part 1

Lecture 3: Left home menu part 2

Lecture 4: Right home side

Lecture 5: Let's work on stories

Lecture 6: Create post form

Lecture 7: Responsive home advanced tricks 1

Lecture 8: Responsive home advanced tricks 2

Chapter 7: Forgot ,reset password,activate account,logout

Lecture 1: Authentification middlware

Lecture 2: Activate account part 1

Lecture 3: Activate account part 2

Lecture 4: Activate Account and fix asecurity risk

Lecture 5: re-Send verification code

Lecture 6: Logout

Lecture 7: Reset password part 1

Lecture 8: Reset password part 2

Lecture 9: Reset password part 3

Lecture 10: Reset password part 4

Lecture 11: Find user

Lecture 12: Send reset code email

Lecture 13: Validate reset code email

Lecture 14: Change password

Chapter 8: Create Post,Cloudinary,emojis..etc

Lecture 1: Create post popup

Lecture 2: Emoji picker

Lecture 3: Refactoring,add to your post ,post

Lecture 4: Preview Images part 1

Lecture 5: Preview Images part 2

Lecture 6: Preview Images part 3 (images grid structure)

Lecture 7: Post model + create post function

Lecture 8: Upload Images to Cloudinary part 1

Lecture 9: Upload Images to Cloudinary part 2

Lecture 10: Post backgrounds

Lecture 11: Hide-open click outside popup

Lecture 12: Submit Post with background + loader

Lecture 13: Error popup & error handling

Lecture 14: Upload images and submit post

Lecture 15: Finish post submit fixing errors,validation

Chapter 9: Post component

Lecture 1: Display all posts

Lecture 2: Post component-header

Instructors

Mohamed Hajji
Full Stack web developer

Rating Distribution

1 stars: 19 votes
2 stars: 14 votes
3 stars: 43 votes
4 stars: 128 votes
5 stars: 320 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu