Build Facebook clone with REACT JS AND THE MERN STACK

Learn how to build a fully advanced social media Facebook clone application using REACT JS and the MERN stack. Master React js, Node js, Express js, and MongoDB while building a scalable backend. Discover the secrets and tricks of React js for frontend work. Gain expertise in authentication, form validation, data handling, and more. Create a responsive application with features like reactions, comments, profile management, and a friendship system. Join this course to become a proficient web developer.

 

What you'll learn

• Build a fully functional Advanced Social Media Facebook clone application version 2022
• All master react js and its insider facts and deceives and become open to involving it for you frontend work
• Build a scalable strong backend utilizing node js and express js
• Learn how to function with Mongodb and how to add ,update, eliminate and question like an ace.
• Learn how to utilize Cloudinary to store your pictures in another splendid manner and how to transfer, search, channel and open another point of view on working with Cloudinary.
• Build a strong authentication system where you can enlist, login ,reset secret phrase
• Build a mailing system without any preparation to send messages to the client for email check connections and reset code secret key.
• Strong advanced form validation utilizing Formik and Correct and learn about the best form validation procedures utilized
• Master working with dates on an other level you have not done previously and learn how appropriately to confirm age by year, month, and day
• Live data validation from the database to ensure your data (like username) is one of a kind and make a circling capability to refresh it without fail
• Learn how to plan solicitations to the database each particular date you need or legitimately and we will utilize that to eliminate all unconfirmed clients following a month
• Learn how to function with JSON web tokens, cookies...
• Learn how to utilize react redux store to have a global store shared across the entirety of our application.
• Learn and master React router dom v6 and clear every one of the difficulties individuals have with it.
• Learn how to make protected routes and secure your application and pages.
• A fully responsive application in various gadgets, and learn advanced stunts or responsiveness.
• Learn how to expertly add dark mode to your application and have a switcher to switch among light and dark mode.
• Learn how to function with useState, useReducer, useEffect, useRef, useCallback, event Listeners
• Learn how to make reusable capabilities for like flipping, clicking outside, exchanging...
• In this application you will have a Home page where you have your menus and rundown of posts for individuals you follow or companions with where you can limitlessly scroll.
• Each client will have a profile page just precisely like facebook cover, profile picture, details, photographs, companions, posts
• You can refresh your cover with old covers you had or another picture utilizing a crooper to edit and zoom and select the piece of picture you need
• So essentially you will learn how to function with pictures crooping, zooming, flipping, pivoting
• You can refresh your profile picture same as cover you can choose and zoom, crop....
• At the point when you update your cover or profile picture a post will naturally get made that says client refreshed his/her profile/cover picture.
• You can make a post utilizing message, emoticons ,foundation, pictures in an efficient way equivalent to facebook
• You can react on a post with all unique reacts, unreact, change your react and see every one of the progressions live straightforwardly.
• You can save/unsave a post,download its pictures, erase it...
• You can remark with text , emoticons and furthermore utilizing pictures and see the additional comments straightforwardly arranged and furthermore show more comments functionality.
• You can add and alter your details like othername, bio, work, working environment, relationship and so on and they will be apparent on your profile and others can see it.
• We will have a friendship system very much like facebook, you can add companion,/drop demand, follow/unfollow, acknowledge demand/erase demand, unfriend...
• You will have a companions page where you can see the companion demands you have, the companion demands you sent, and your rundown of companions too
• We likewise add a live search functionality where you can search for different clients and they will get stored in your search history and you generally can eliminate them.

Prerequisites

A fundamental information in working with React js

A sensible information in web improvement is constantly invited

Description

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 numerous different apparatuses we will use through the course.

-So as start we will build a strong authentication system so you can enroll, login and reset secret phrase, we will likewise have a validation system for register utilizing Formik and That is correct with cordial mistake messages to check name to be a specific length or liberated from extraordinary characters, approve email and secret phrase, approve dates to confirm age, username will be created naturally and we will ensure it exceptional.

-We are likewise making a mailing system where we will send confirmation connections and reset secret phrase codes to the client, and straightforwardly in the wake of enrolling the client gets a check connect to enact account, so we are additionally learning how to make html messages.

-We have a home page where all posts for individuals you follow or companions with will be shown blended in with your posts and requested from most up to date to most established.

-You can make a post utilizing message, emoticons ,foundations, pictures and done beautifully woman as Facebook precisely.

-You can react on a post and change react unreact, utilize like button to like, dissimilar to and eliminate existing react, additionally reacts will be shown and requested and any react you or eliminate will influence that live without invigorate.

-You can remark utilizing text, emoticons and furthermore pictures additionally comments will be requested and continuously refreshing straightforwardly after submit.

-you can save/unsave post, download post pictures, erase post...

-We will have all kind of validation for record transfer for size and type.

-You will learn how to trim, zoom, turn, flip pictures utilizing crooper.

-You can refresh your cover picture utilizing old cover pictures or another picture with the choice to edit zoom and select the piece of picture you need to utilize and after submit straightforwardly it will make a post that says client refreshed his/her cover picture.

-You can refresh your profile picture utilizing old cover pictures or another picture with the choice to edit zoom and select the piece of picture you need to utilize and after submit straightforwardly it will make a post that says client refreshed his/her profile picture and you can likewise utilize text and emoticons.

-Each client have its own profile, where all details showed from cover, profile picture , details (othername, bio, work, work environment, relationship...), photographs, companions, posts

-You can refresh every one of your details and see changes live straightforwardly.

-We will utilize Cloudinary to transfer our pictures in another imaginative manner, you will be dazzled.

-We have a full friendship system whe you can add companion, drop demand, acknowledge demand, erase demand, unfriend, follow, unfollow

-Likewise we have a companions page where you can mage every one of your solicitations and companions.

-We have live search functionality as you type new outcomes show up, additionally any client you snap will be added to your search history and it's likewise will be shown all together by the most recent tapped on.

-We will utilize skeleton loaders while page loads or while we get data from backend and furthermore utilizing various sort of loaders across our application.

-We will have protected routes.

-We will utilize react redux store to arrangement a global store to share data across all parts.

-We will utilize react router dom v6 made sense of in details.

-We will work with cookies and JSON web tokens to briefly store data.

-we will utilize many react js capabilities like useState, useEffect, useReducer, useRef, useCallback, event listeners and furthermore make custom snares.

Who this course is for:

• Novice web developer
• Junior web engineer
• React js engineer
• Node js engineer
• web engineer

Instructor

Mohamed Hajji

Full Stack web engineer

• 4.3 Educator Rating
• 704 Reviews
• 5,337 Students
• 4 Courses

Hey ?

I go by Mohamed HAJJI, I'm a full stack web designer and a decent one obviously, I have extraordinary information in the web advancement field in both frontend and backend ,I have constructed endless applications utilizing various innovations, and my work here is to take all that I know and attempt and offer it with all my kindred engineers from all levels particularly for new engineers since I have been there and I know the battle of attempting to learn and adjust to every one of the innovations we have these days and I will attempt in my new excursion as a teacher to have various courses to build different significant ventures utilizing various innovations.

Useful links:

1. React JS
2. Node.js
3. Express.js
4. MongoDB
5. Cloudinary
6. Formik
7. Yup
8. React Redux
9. React Router DOM
10. JSON Web Tokens