Darshan Naik's Blog

Darshan Naik's Blog

Facebook clone

Facebook clone

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.

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

DAHqIweuTg.jpg

-Login form

dtOsPnXOBF.jpg

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.

l8Iv0zkYr.jpg

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.

opAL7FWY0.jpg

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.

oGC88W8i6.jpg

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.

n7E84R2L5.jpg

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.

0lfnNAaqu.jpg

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.

8QnykytcY.jpg

  • Admin's friends page.

LujREyQxa.jpg

  • Rest of the user's page.

cQT225eg7.jpg

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.

tJ-SdJR8I.jpg

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.

DK2Xt9RPZ.jpg

  • Sent requests can also be viewed here.

OUcx4dUV1.jpg

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.

WBBtS_INH-.jpg

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.

hkhKaKy0c.jpg

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.

m0YWn-4PB.jpg

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

  • Small screen look.

OPoLndHgA.jpg

  • Medium screen look.

VFKgm8iLR.jpg

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 πŸ‘‹.

Β 
Share this