Instagram Clone

Description

The Instagram Clone UI project seeks to replicate the key features of the original Instagram application, allowing users to explore, post, and interact with content in a familiar environment. It includes components such as the feed, stories, user profiles, and explore page, each designed to closely resemble their counterparts in the official Instagram app. This project is built using React.js for dynamic frontend development, Tailwind CSS for responsive styling, and Firebase as the backend.

Features

Feed 📰
- Display posts from followed users in a scrollable feed format.
Stories 📚
- Showcase user stories in a visually appealing carousel-like interface.
User Profiles 👤
- View and interact with user profiles, including bio, profile picture, and follower/following counts.
Explore Page 🔍
- Discover new content and users based on interests and recommendations.
Upload Posts 📷
- Allow users to upload photos and videos to share with followers.
Interactions 💬
- Like, comment, and share posts with other users to engage with content.
Backend Features 🔧
- Firebase integration for:
  - Email/password authentication for user management.
  - Storage for hosting user-uploaded photos and videos.
  - Firestore for database functionality to store and retrieve user data, posts, and interactions.

Setup .env file

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...
VITE_FIREBASE_MEASUREMENT_ID=...

Run the app

npm run dev

Clone the app

git clone https://github.com/OMARxKHALID/reactInstagramClone