https://github.com/omarxkhalid/reactinstagramclone
This project is a replica of the Instagram user interface, built using React.js for dynamic frontend development, Tailwind CSS for responsive styling, and Firebase for the backend. It aims to mimic the basic functionalities and design elements of Instagram, providing a realistic user experience.
https://github.com/omarxkhalid/reactinstagramclone
clone firebase javascript reactjs redux redux-toolkit tailwindcss
Last synced: 3 months ago
JSON representation
This project is a replica of the Instagram user interface, built using React.js for dynamic frontend development, Tailwind CSS for responsive styling, and Firebase for the backend. It aims to mimic the basic functionalities and design elements of Instagram, providing a realistic user experience.
- Host: GitHub
- URL: https://github.com/omarxkhalid/reactinstagramclone
- Owner: OMARxKHALID
- Created: 2024-02-14T14:27:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-23T15:51:59.000Z (over 2 years ago)
- Last Synced: 2025-02-12T05:45:28.755Z (over 1 year ago)
- Topics: clone, firebase, javascript, reactjs, redux, redux-toolkit, tailwindcss
- Language: JavaScript
- Homepage: https://reactjsinstagramclone.vercel.app
- Size: 447 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
1. **Feed** 📰
- Display posts from followed users in a scrollable feed format.
2. **Stories** 📚
- Showcase user stories in a visually appealing carousel-like interface.
3. **User Profiles** 👤
- View and interact with user profiles, including bio, profile picture, and follower/following counts.
4. **Explore Page** 🔍
- Discover new content and users based on interests and recommendations.
5. **Upload Posts** 📷
- Allow users to upload photos and videos to share with followers.
6. **Interactions** 💬
- Like, comment, and share posts with other users to engage with content.
7. **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
```js
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
```shell
npm run dev
```
### Clone the app
```bash
git clone https://github.com/OMARxKHALID/reactInstagramClone