Meta Clone - Dioxus & Rust

A high-fidelity, performance-focused Facebook (Meta) clone built with Rust and the Dioxus framework. This project replicates the modern Meta Design System with a focus on responsiveness, modular component architecture, and a seamless user experience.

📸 Visuals

Desktop Overview

Interactive Feed

🎥 Video Demonstration

Check out the full walkthrough of the application: Project Demo Video

---

✨ Key Features

• High-Fidelity UI: Meticulously designed components following the Meta Design Language, including typography, spacing, and color palettes.
• Dynamic News Feed:
  • Post creation interface with interactive "What's on your mind?" input.
  • Support for media-rich posts (images, sponsored content).
  • Engagement metrics tracking (Likes, Comments, Shares).
• Comprehensive Navigation:
  • Centralized Header with Search, Home, and personalized notification icons.
  • Left Sidebar: Quick access to Friends, Groups, Marketplace, Watch, and customized shortcuts (React Developers, Rust Programming).
  • Right Sidebar: Integrated sponsored ads and real-time active contacts list with presence indicators.
• Modular Component Architecture: Built using Dioxus components for maximum reusability and performance.
• Responsive Layout: A classic three-column layout that adapts to different screen sizes.

---

🛠 Tech Stack

• Language: Rust - Ensuring safety and performance.
• Frontend Framework: Dioxus v0.7.1 - Leveraging the power of Rust for modern web/desktop UIs.
• Icons: Dioxus Free Icons (Bootstrap Icons set).
• Styling: Modern Vanilla CSS for granular control over the Meta aesthetic.

---

📂 Project Structure

├── assets/             # Static resources (CSS, Logos, Icons, Visuals)
├── src/
│   ├── components/     # Modular UI components
│   │   ├── header.rs   # Top navigation bar
│   │   ├── feed.rs     # Main news feed & post logic
│   │   ├── left_sidebar.rs # User shortcuts & navigation
│   │   ├── right_sidebar.rs # Contacts & Sponsored content
│   │   └── ...         # Messaging, Notifications, Friends
│   └── main.rs         # Application entry point & Routing
└── Cargo.toml          # Rust dependencies & project config

---

🚀 Getting Started

Prerequisites

• Rust installed.
• Dioxus CLI installed:

  cargo install dioxus-cli

Running the Project

1. Clone the repository:

   git clone <repository-url>
   cd Facebook

2. Launch the development server:

   dx serve

3. Open your browser to http://localhost:8080 (or the port specified by the CLI).

---

📝 License

This project is for educational purposes as a demonstration of high-fidelity UI development using Rust and Dioxus.