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 is generated using scripts included in this repository that utilize Faker.js to create realistic user profiles, posts, comments, and more.

Data is stored in Firebase and optimized to reduce document reads by consolidating essential information into single documents. 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

(back to top)

• Bun: Install from https://bun.sh/ and ensure it's on your PATH
• Firebase CLI: Required to run local emulators
  • Install (global): npm i -g firebase-tools
  • Verify: firebase --version
• Java 11+: Required by Firebase Emulators
  • Verify: java -version

1. Clone the repo and install dependencies:

   git clone https://github.com/zivavu/Clonedbook.git
   cd Clonedbook
   bun install  # or npm/yarn/pnpm install

2. Generate test data:

   # Generate test data (creates data files)
   bun run generate-data

   Note: The generation process can take some time because it downloads images for the test data.

3. Start Firebase emulators:

   bun run emulators

4. Populate emulators with data:

   bun run emulators:populate

5. Start the development server:

   bun run dev:local

6. Open your browser: Navigate to http://localhost:3000

Note: The project uses Bun as the default JavaScript runtime, but you can use other runtimes like Node.js if you prefer. Just make sure your runtime supports TypeScript files (.ts) for the data generation scripts.

# Local development (optional, scripts already set this for you)
NEXT_PUBLIC_USE_EMULATOR=true

# Production / Remote Firebase + Algolia
NEXT_PUBLIC_USE_EMULATOR=false

# Firebase
NEXT_PUBLIC_API_KEY=
NEXT_PUBLIC_AUTH_DOMAIN=
NEXT_PUBLIC_DATABASE_URL=
NEXT_PUBLIC_PROJECT_ID=
NEXT_PUBLIC_STORAGE_BUCKET=
NEXT_PUBLIC_MESSENGING_SENDER_ID=
NEXT_PUBLIC_APP_ID=

# Algolia
NEXT_PUBLIC_ALGOLIA_APP_ID=
NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=

# Optional (tests and links)
NEXT_PUBLIC_BASE_URL=

The project includes end-to-end tests using TestCafe that cover key functionality:

• Home page tests: Validates post loading and infinite scroll
• Friend interaction flow: Tests sending, accepting, and removing friend requests
• Likes interaction flow: Tests post liking, unliking, and comment interactions
• Profile page tests: Tests profile page navigation and content display
• Account details flow: Tests viewing and interacting with user account information

To run a specific test:

bun run test:e2e src/tests/homePage.ts

(back to top)

(back to top)

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

(back to top)

Tomasz Kierzenkowski - zivavu@gmail.com

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

(back to top)