Build Facebook clone with REACT JS AND THE MERN STACK 2022
Build Facebook clone with REACT JS AND THE MERN STACK 2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English + srt | Duration: 149 lectures (33h 56m) | Size: 15 GB
Build a fully advanced social media facebook clone application and master React js, Node js, Express js and Mongodb
What you'll 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.
Requirements
A basic knowledge in working with React js
A reasonable knowledge in web development is always welcomed
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 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.
Who this course is for
Beginner web developer
Junior web developer
React js developer
Node js developer
web developer
Homepage
