A Full Stack project

An advanced social media Facebook clone application using React js , Node js, Express js, Mongodb and many many other tools

-A strong authentication system so you can register, login and reset password, 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.

-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, also created html emails.

-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...

-All sort of validation for file upload for size and type.

-We can 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.

-Used Cloudinary to upload our images in a new creative way, you will be impressed.

-A full friendship system whe you can add friend, cancel request, accept request, delete request, unfriend, follow, unfollow

-A friends page where you can mage all your requests and friends.

-A 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.

-Used skeleton loaders while page loads or while we get data from backend and also using all different kind of loaders across our app.

-Protected routes.

-Used react redux store to setup a global store to share data across all components.

-Used react router dom v6 explained in details.

-Worked with cookies and JSON web tokens to store data temporarily.

-Used many react js functions like useState, useEffect, useReducer, useRef, useCallback, event listeners and also create custom hooks.