Hello there, This time, we managed to clone down Facebook, one of the leading social media site available in the market, Having 2.8 billion monthly active users. Building this clone was not an easy task faced lots of issues, But as enthusiastic developers, We managed to overcome all kinds of potholes in our path.

Project walk-through 👣

This application is standing on various pillars, to name some, React, Redux, Emoji-Mart, Icon-Finder, Google-Fonts, Firebase, and Image-Resizer. Hands behind shaping this project were.

• Darshan Naik: Darshan-Naik
• Gurunath Sahukar: Guru-Eco
• Ankit Bajpai: ankitbajpai1607
• Soumyadri Das: soumyadri

Signup and Login

This is how our login page looks like, User can create their own account by signing in else if he has an account he can directly log in. If he has forgotten the password then he can reset it by providing his mail id that was used during creating an account there, To that mail, he will get a form to change his password. Here we have handled all kinds of errors, like Wrong passwords, Wrong emails, and Network errors.

• Sign Up form

-Login form

Home🏠

This is how our landing page looks, Tried our best to make it pixel perfect hope you like it 😊. Here we have covered various things like you can see a search bar on top that can be used to search friends and people using this app. On the right side of the page we have multiple sections, On top, you will be able to see the "People You May Know" section which will suggest some of the users to you, An algorithm is running behind that gives away random 4-5 users who are not in your contact.

At the bottom, you can see the "Contacts" section that'll show all your friends with whom you can chat, which I'll explain later.

Now coming to the middle part you can see stories posted by users on top and an option to create your own post below that and posts that are posted by users so far at a later part. To look for more posts users have to just scroll and this activity will be detected by the application and according to that next posts are shown to the user.

On the left side, you can see some options which will lead you to the Profile page, Friends page, Messenger, Videos page, and Favorites page where you can see all of the user's favorites posts.

Posts ✉️

Coming to posts users can make a post using create posts option. They can add Quotes, Photos or Videos, and any kind of Activity.

People can react to the posts by giving a like, passing comment, and sharing it. All these activities are reflected live i.e there response is instantaneously visible to the rest users.

Users job is not over by just making a post, He has been giving all liberation to Edit, Delete, Set as a profile pic if the post contains an image, and Add to favorites page if he likes and wants to preserve it.

You can see on the left that users can toggle between Dark and Light themes too. The entire application is supportive of dark and light themes just like Facebook.

Messenger 💬

As I already told you, the user can chat with his friends from the home page itself, If they click on any of the contacts then a small chat box get's opened from where the user can proceed with his/her conversation.

Users can even perform multiple chats, close all of them at once or even minimize them. Let's say If the user doesn't feel comfortable making a conversation from such a small window, No worries we got a whole big window for them from where they can perform a peaceful conversation.

All the messages posted or replies made are real-time. Users can have a real-time conversation with his/her friends with no delay in replies. If a user is not present on the messenger page he will be notified when a new message comes in.

Profile 👨‍💼

Here in profile, we are dealing with three kinds of users Admin, Admin's friend, and the rest users. As an admin, they can edit their profile and cover pic, If interested can add and edit their bio. They can even add a story or add any new post if want to. On this page, the admin can see all the posts he/she has made so far and have a glance at some of his friends too.

• This is how the admin's page looks like.

• Admin's friends page.

• Rest of the user's page.

If interested, the admin can visit his friend's section where he can see all his friends and if interested can even unfriend any of his friends.

Friends 👬

If the user wants to see all the friend requests that are sent to him or he has sent to some can be viewed by moving to the friend's page.

• Incoming requests will be shown here.

• Sent requests can also be viewed here.

If interested can even cancel the request here

Videos 🎥

Users can view all the videos that are posted in this app over here too. If he wants then can add them to favorites, If the video has been posted by some other person then the user can visit his profile page and have a glance at his profile.

Favorites 🤟

On the favorites page, the user can see all those posts that he has added to his favorites. If he wishes to remove them from his favorites then he can even do that.

These were the main features that we have built during our construct week.

Minor Features 🤏

Minor features like searching for Users, Toggleing active status, searching for friends to make a chat with them, and live notifications are also been added.

Not to forget this application is fully responsive to all screen sizes be it small, medium or large.

• Small screen look.

• Medium screen look.

Conclusion

We would like to thank Masaischool for providing us with a beautiful platform to showcase our talents in web designing, I personally thank all my team members Gurunath Sahukar, Ankit Bajpai, and Soumyadri Das for their full support and contribution in building this wonderful project.

Hope you liked our work 🙂. Thank you for reading with great patience, With this, I'll take your leave. Take care, Be safe. Astala vista amigo 👋.