View app | Technologies used | Report Bug
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.
The interface closely matches the original design, is fully responsive, and supports dark mode. Components are organized using the Atomic Design methodology.
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 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.
- Built with MUI (Material-UI) with custom theme and component overrides
- Supports both light and dark modes with state persistence using
next-themes - Fully responsive design with custom breakpoints
- Custom scrollbars and animations
- Modular component structure following Atomic Design methodology
- Beautiful loading states with gradient placeholders
- Font Awesome icons integration
- Interactive post feed with infinite scrolling, sorted by date
- Smart post layout adaptation based on content length
- Contacts sidebar with:
- Recently added friends display
- Real-time friend search functionality
- Online status indicators
- Shortcuts sidebar with quick navigation links
- Rich user info display including:
- Background and profile pictures
- Mutual friends counter
- Smart friendship management buttons
- Modular tile-based layout with:
- Posts Feed
- About Section with multiple categories:
- Overview
- Contact and Basic Info
- Work and Education
- Family and Relationships
- Places Lived
- Friends Grid
- Photos Collection
- Comprehensive friendship management with tabs for:
- Home Overview
- Friend Requests
- Friend Suggestions
- All Friends List
- Interactive user preview cards
- Friendship status management
- Smart mutual friends display
- Smart Search
- Powered by Algolia for lightning-fast results
- Real-time user search with autocomplete
- Rich preview cards for search results
- Chat System
- Persistent chat list with recent messages
- Responsive chat window management
- Unread messages indicators
- User Menu
- Quick profile access
- Theme toggle (Light/Dark mode)
- Session management
- Rich post creation with:
- Text formatting
- Multiple image upload support
- Smart image optimization:
- Automatic resizing
- WebP conversion
- Dominant color extraction
- Blur placeholder generation
- Interactive post viewing:
- Full-screen image viewer
- Smart layout adaptation
- Rich text formatting
- Complete post management:
- Create, edit, delete operations
- Rich media attachments
- Privacy controls
- Comments System
- Nested comments support
- Rich text formatting
- Edit and delete capabilities
- Smart pagination
- Reactions System
- Multiple reaction types
- Real-time updates
- Reaction summaries
- User lists for each reaction
- Friend System
- Friend requests
- Friendship suggestions
- Mutual friends tracking
- Relationship status management
- Image optimization pipeline:
- Automatic WebP conversion
- Resolution optimization
- Dominant color extraction
- Blur hash generation
- Infinite scrolling with smart pagination
- Real-time updates using Redux
- Optimized bundle size with dynamic imports
- Vercel Analytics integration
- End-to-end tests with TestCafe
- Key user flows coverage:
- User search functionality
- Infinite scroll behavior
- Post CRUD operations
- Profile interactions
Distributed under the MIT License. See LICENSE.txt for more information.
Tomasz Kierzenkowski - [email protected]
Project Link: https://github.com/zivavu/Clonedbook