Facebook Clone (React)

A responsive Facebook UI clone built with React and Tailwind CSS. This project replicates Facebook's core UI components and features for educational purposes.

Disclaimer: This project is a UI clone created for educational purposes and portfolio demonstration. It is not affiliated with Meta/Facebook and should not be used for commercial purposes.

📸 Preview

Desktop View

Main interface showing stories carousel, create post interface, and personalized feed

Responsive layout with left navigation, news feed, and right sidebar with sponsored content

🚀 Key Features

• Responsive three-column layout matching Facebook's design
• Interactive story carousel with create story option
• Dynamic header with working navigation
• Collapsible left sidebar with shortcuts
• Right sidebar with sponsored content and active contacts
• Post creation interface with multiple options
• News feed with post engagement features
• Real-time notification system
• Modern UI with smooth transitions
• Mobile-responsive design

💻 Tech Stack

• React.js
• Tailwind CSS
• Lucide Icons
• Modern JavaScript (ES6+)

📱 Components

Header

• Facebook logo and search functionality
• Navigation menu with active states
• Notification badges for messages and alerts
• User profile quick access

Left Sidebar

• User profile shortcut
• Navigation menu with collapsible sections
• Custom shortcuts list
• Footer information

Main Feed

• Stories carousel with create option
• Create post interface with multiple actions
• Dynamic news feed with engagement options
• Post interaction buttons (Like, Comment, Share)

Right Sidebar

• Sponsored content section
• Birthday reminders
• Online contacts list
• Active status indicators

🛠️ Installation & Set Up

1. Clone the repository

git clone https://github.com/yourusername/facebook-clone-react.git\

cd facebook-clone-react

npm install

npm start

🏗️ Project Structure

  facebook-clone-react/
├── public/
├── src/
│   ├── components/
│   │   ├── Header.js
│   │   ├── LeftSidebar.js
│   │   ├── RightSidebar.js
│   │   ├── Feed.js
│   │   ├── Stories.js
│   │   └── CreatePost.js
│   ├── App.js
│   └── index.js
└── package.json

Educational Purpose

This project was created to demonstrate proficiency in:

React.js component architecture Tailwind CSS styling and customization Responsive design principles Modern JavaScript practices UI/UX implementation State management Component reusability CSS Grid and Flexbox layouts

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Fork the Project Create your Feature Branch (git checkout -b feature/AmazingFeature) Commit your Changes (git commit -m 'Add some AmazingFeature') Push to the Branch (git push origin feature/AmazingFeature) Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details. ⚠️ Important Note This is a clone project for educational purposes only. All product logos, designs, and trademarks, except where noted, are the property of their respective owners. 👏 Acknowledgments

Design inspiration from Facebook Icons from Lucide Icons React community for amazing tools and libraries

📧 Contact

Kelvin Nimely - [email protected] Project Link: https://github.com/OnlyGlapor/facebook-clone-react