Clonedbook

View app   |    Technologies used   |    Report Bug

🚀 About the project

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.

🔧 Getting Started

Forking and Setting Up

If you want to fork and run this project locally, you'll need to set up a few things:

1. Firebase and Algolia Access: The project requires Firebase and Algolia credentials. Create your own accounts and services or contact me for access to existing ones.

2. Environment Variables: Create a .env.local file in the root directory with the following variables:

   NEXT_PUBLIC_ALGOLIA_APP_ID=your_algolia_app_id
   NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=your_algolia_search_api_key
   NEXT_PUBLIC_DATABASE_URL=your_firebase_database_url
   NEXT_PUBLIC_API_KEY=your_firebase_api_key
   NEXT_PUBLIC_AUTH_DOMAIN=your_firebase_auth_domain
   NEXT_PUBLIC_APP_ID=your_firebase_app_id
   NEXT_PUBLIC_MESSENGING_SENDER_ID=your_firebase_messaging_sender_id
   NEXT_PUBLIC_PROJECT_ID=your_firebase_project_id
   NEXT_PUBLIC_STORAGE_BUCKET=your_firebase_storage_bucket
   

3. Database Data: The application requires a specific data structure to function properly:

   • The original data was generated using a 500-line script (unfortunately lost) with Faker and LoremFlickr
   • If you need a copy of the database structure and sample data, please email me at zivavu@gmail.com
   • Alternatively, you can create your own data following the Firebase structure visible in the code

4. Installation and Running:

   # Install dependencies using your preferred package manager (npm, yarn, pnpm, bun)
   npm install
   # or
   bun install
   
   # Run development server
   npm run dev
   # or
   bun dev
   
   # Run tests
   npm run test:e2e
   # or
   bun test:e2e

✨ Implemented Features

Interface & Design

• 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

Home Page

• 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

Profile Page

• 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

Friends Page

• 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

Navbar

• 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

Posts & Media

• 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

Social Interactions

• 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

Performance Optimizations

• 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

Testing

• End-to-end tests with TestCafe
• Key user flows coverage:
  • User search functionality
  • Infinite scroll behavior
  • Post CRUD operations
  • Profile interactions

(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 - zivavu@gmail.com

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

(back to top)