diff --git a/README.md b/README.md index 8ee7cbe..89fc231 100644 --- a/README.md +++ b/README.md @@ -9,108 +9,100 @@ ## :rocket: 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). +This project is a basic clone of Facebook, replicating many of the features found on the home, profile, and friends pages. It includes interactive elements such as portals and poppers to enhance user interaction. -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. +The interface closely matches the original design, is fully responsive, and supports dark mode. Components are organized using the Atomic Design methodology. -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. +Currently, there's no authentication system, so users are represented by dummy/random data, allowing anyone to log in with just a click. The data for users, chats, photos, posts, comments, reactions, and friendships is generated using a script (not included in this repository) that utilizes Faker and LoremFlickr. -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. +Data is stored in Firebase and optimized to reduce document reads by consolidating essential information into single documents. Since the focus is not on scaling to a large number of users, this approach prioritizes simplicity and efficiency. Additionally, user data is indexed using Algolia to provide fast and efficient search autocomplete. ![Screenshot_1](https://github.com/zivavu/facebook-clone/assets/107223633/2d419cbd-4869-4a79-8007-445d65b4c9b8) -## :sparkles: Implemented features +## :sparkles: Implemented Features ### Interface -- Built as an exact clone using MUI and styled-components -- Light and dark modes(with persisting) -- Responsive -- Modular +- Built with MUI +- Supports both light and dark modes (with state persistence) +- Fully responsive design +- Modular component structure -### Home page +### 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) +- Interactive post feed with infinite scrolling, sorted by date +- Contacts sidebar displaying recently added friends and search functionality +- Shortcuts sidebar (most links not yet implemented) -### Profile page +### Profile Page -- Users info with background, profile picture, mutual friends, and friendship management buttons +- User info including background, profile picture, mutual friends, and friendship management buttons - Built with modular, responsive tiles -- Posts tab -- About tab -- Friends tab -- Photos tab +- Tabs for: + - Posts + - About + - Friends + - Photos -### Friends page +### 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 +- Tabs for: + - Home + - Friend Requests + - Friend Suggestions + - All Friends +- Preview users using the original profile page layout and manage friendship status ### 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 +- **Search Box** + - User search powered by [Algolia](https://www.algolia.com/) + - Displays results as a user list with autocomplete functionality +- **Chats Popper** + - Displays all chats and recent messages + - Allows users to open chats and view all messages +- **Logged User Popper** + - Displays the logged-in user + - Option to switch to a different random user + - Dark mode toggle + +### Posts & Pictures + +- Create posts (image uploads optimized for size and quality using Canvas) +- Optimized image sizes using `next/image` +- View posts and pictures in custom full-screen portals +- Comment, react, edit, and delete functionality ### Comments -- React -- Edit -- Delete +- Ability to react, edit, and delete comments ### 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 +- Custom component for displaying the most popular reactions with a count +- Custom popper for choosing reactions +- Custom dialog for viewing all reactions and their owners -### User preview popper +### User Preview Popper -- Opens while hovering links and photos of users -- Displays users profile picture, name, and mutual friends -- Has buttons for managing friendship +- Displays user profile picture, name, and mutual friends when hovering over links or photos +- Includes buttons for managing friendship status -### Chats portal +### 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 +- Limits the number of open chats based on screen size +- Persistent chat list +- Displays all messages in each chat +- Supports sending new messages +- Custom emoji support ### 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 +- End-to-end tests with TestCafe +- Coverage includes key user flows such as: + - Searching for users + - Infinite scrolling on the home page + - Creating, editing, and deleting posts on the profile page