Clonedbook

View app   |    Technologies used   |    Report Bug

🚀 About the project

This is a basic clone of Facebook. It includes most of the features from the home, profile, and friends pages(Including all the portals and poppers, used for interacting with elements).

Interface for the most part is recreated one-to-one with the original, fully responsive, and has dark mode. Components are structured in an Atomic, modular way.

For now the is no auth system, every user is a dummy/random one, and everyone is free to log on to, with a click of a button. All the(users, chats, photos, posts, comments, reactions, friends, relationships) data on the site, is generated by script not included in the repo. The script uses Faker, and LoremFlickr, and uploads all the data.

Data is stored in Firebase, and not designed to scale much in terms of existing users(to reduce document reads by combining the most basic data, and public friends into single documents). Users are also indexed on Algolia for searching autocomplete.

✨ Implemented features

Interface

• Built as an exact clone using MUI and styled-components
• Light and dark modes(with persisting)
• Responsive
• Modular

Home page

• All posts, sorted by date with infinite scrolling, fully interactive
• Contacts sidebar with recently added friends, and search
• Shortcuts sidebar(most links aren't implemented)

Profile page

• Users info with background, profile picture, mutual friends, and friendship management buttons
• Built with modular, responsive tiles
• Posts tab
• About tab
• Friends tab
• Photos tab

Friends page

• Home tab
• Friends Requests
• Friend Suggestions
• All Friends
• Preview all the users(using the original profile page layout), and manage state of their friendship

Navbar

• Search box
  • Search users index powered by Algolia
  • Search results displayed as a users list
  • Autocomplete
• Chats popper
  • Displays all the chat, and recent messages
  • Lets the user open chat, and view all the messages
• Logged user popper
  • Display logged user
  • Button used to log on as a different, random user
  • Dark mode switch

Elements(posts & pictures)

• Create(Post only atm)(uploaded pictures are optimised for size and quality using canvas)
• Optimised sizes provided by next/image
• View(using custom full screen portals, for all picture types and posts)
• Comment
• React
• Edit
• Delete

Comments

• React
• Edit
• Delete

Reactions

• Custom component for displaying most popular reactions and count
• Custom popper for choosing reaction
• Custom dialog for viewing all the reactions and their owners

User preview popper

• Opens while hovering links and photos of users
• Displays users profile picture, name, and mutual friends
• Has buttons for managing friendship

Chats portal

• Max opened chats count based on screen size
• Chats
  • List of opened ones is persisted
  • Display all the messages
  • Send new ones
  • Custom chat emoji

Tests

• End-to-end tests using TestCafe
• Tests cover key user flows such as searching for users, infinite scrolling on the home page, and creating/editing/deleting posts on the profile page

(back to top)

🧑‍💻 Technologies used

(back to top)

📝 License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

💬 Contact

Tomasz Kierzenkowski - [email protected]

Project Link: https://github.com/zivavu/Clonedbook

(back to top)