https://github.com/devhabeeblateef/instagram-clone
Instagram clone built with React.js, Tailwind CSS, etc.
https://github.com/devhabeeblateef/instagram-clone
Last synced: 4 months ago
JSON representation
Instagram clone built with React.js, Tailwind CSS, etc.
- Host: GitHub
- URL: https://github.com/devhabeeblateef/instagram-clone
- Owner: devhabeeblateef
- Created: 2021-12-17T02:04:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-23T02:26:08.000Z (over 1 year ago)
- Last Synced: 2025-10-28T21:41:55.759Z (7 months ago)
- Language: JavaScript
- Homepage: instagramcloneapp-virid.vercel.app
- Size: 110 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Instagram Clone
This is a fully functional Instagram clone built using modern web technologies. It replicates key features of the popular social media platform, providing a sleek and responsive user experience.
## 🚀 Features
- **User Authentication**: Login and sign-up functionality (can be extended with Firebase or other services)
- **Post Creation**: Upload and display photos, add captions, like and comment on posts
- **Profile Management**: Create and edit user profiles
- **Responsive Design**: Fully responsive, optimized for mobile and desktop devices
- **Realtime Updates**: Notifications and new post updates (using a mock backend or Firebase)
- **Likes & Comments**: Like and comment functionality for each post
## 🛠️ Tech Stack
- **Frontend**: React.js
- **Styling**: Tailwind CSS
- **State Management**: React Context API / Redux (based on preference)
- **Routing**: React Router
- **Authentication**: Firebase Authentication (or any preferred authentication method)
- **Backend**: Mock API or Firebase Firestore (for storing posts and comments)
- **Deployment**: Vercel, Netlify, or any other preferred hosting platform
## 🛠️ Installation Instructions
Follow these steps to set up the project locally:
### 1. Clone the Repository
```bash
git clone
cd instagram-clone
```
### 2. Install Dependencies
Make sure you have `npm` or `yarn` installed. Run:
```bash
npm install
# or
yarn install
```
### 3. Set up Firebase Authentication (if used)
Create a Firebase project and enable authentication using email/password or any other method. Add your Firebase configuration details to a `.env` file in the root directory:
```env
REACT_APP_FIREBASE_API_KEY=your_firebase_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_firebase_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_firebase_app_id
```
### 4. Start the Development Server
Run the following command to start the app locally:
```bash
npm start
# or
yarn start
```
The app will be available at `http://localhost:3000`.
### 5. Build for Production
To build the application for production, run:
```bash
npm run build
# or
yarn build
```
### 6. Deployment
Deploy the app to platforms like Vercel or Netlify for hosting.
## 📚 Tech Details
- **React.js** for building a dynamic and fast UI.
- **Tailwind CSS** for styling with utility-first classes.
- **React Router** for page navigation.
- **Firebase** for authentication, real-time database, and file storage (if used).
- **Mock API** or **Firestore** for simulating backend data and user interactions.
## 🤝 Contributing
Contributions are welcome! If you'd like to contribute or suggest improvements, feel free to open an issue or submit a pull request.
---
**Enjoy building and exploring the Instagram clone!** 📸