Facebooks Post Clone Built With React

Facebooks Post Clone

This will contain all functionality of Facebooks Post (From uploading photo to writing a post on a auto expanding text area, adding Emojies, uploading multiple photo and video). It will also open the tag friends list at the same window as in Facebook. For feelings, the list of emojies will appear and it will be possible to
open locations menu with a dummy locations list. When the post is ready, when you click to Post button, it will show up on the main posts page.

Currently, a dummy initial Face Wall created with a header and left menu section. To make it seem like facebook, right manu will also be added and
also search box on header will have functionality like in facebook.

Start Date : November 6, 2021
Expected completion date : Before 15th of November 2021 (Target Date Changed)
At the beginning, I stated to study to create only the clone of the Facebook Post section (image upload, text etc.)
but after a while, it turned to be a clone of Facebook wall, for this reason, target date changed to November 21, 2021

  • This contain complete Post on Wall (Image Structure, Likes, comments, likes for comments and reply for comments)
  • Post menu
  • Header Menus (all from MarketPlace, Groups, Watch pages to the menus on the right of the header)
  • Right Header Menu, from user account pages to display and accessibility (Dark Mode, Light Mode etc)
  • Functional left side drawer (will open all related pages with the help of react router dom)
  • User profile page (with posts and shares, friends, photos of the user)
  • List of contacts on the right side drawer (But no messenger functionality ? )
  • All simple pages (Privacy, Terms, Advertising etc. they will be a simple copy from Facebook’s related pages.)
  • And may be Login Page of Facebook (But no login functionality, FOR NOW ? )

Date 07/11/2021 Screenshots from the clone study :

Wall Image No Activity :

Wall Image Search Box Used

Wall Image Left Menu Show More Clicked

Post Presentation Window Started (Uploaded Images Window Completed)

According to the number of uploaded images to the post, the structure/styles of ImageWindow will change,
it checks number of images, number of Portrait Images and Number of Landscape images and creates Pictures
window of post according to those data. Needs some refactoring especially on styles, but currently works well

Static Post Menu added to the Post Window (functionality will be added) – 11/11/2021

Post Interactions Section Draft Structure created – 11/11/2021

Header Right Menu created from the reusable CircleButton Component :

Account Menu added to Header Right Menu

Emojies added to Likes (Emoji by Like Type and List of users who choose that like type)

User Information card added to the Post Window, it checks position and on hover appears top or bottom of the user profile image according to position

GitHub

View Github