A responsive and dynamic Instagram-style social media platform built using React and Firebase. Users can sign up, log in, upload images with captions, and interact with posts through real-time comments. This project replicates key features of modern photo-sharing applications and serves as a great full-stack learning tool.
- User Sign-up and Login (Firebase Authentication)
- Image Upload with Captions (Firebase Storage)
- Real-time Post Feed with Comments (Firestore Database)
- Responsive Layout using Material-UI
- Frontend: React.js, Material-UI, CSS
- Backend: Firebase Auth, Firestore, Firebase Storage
- Clone the Repository
git clone https://github.com/yourusername/Instagram-Clone.git
cd Instagram-Clone
Install Dependencies
bash
Copy code
npm install
Firebase Configuration
Go to Firebase Console
Create a new project
Enable:
Authentication → Sign-in method → Enable Email/Password
Firestore Database → Create database (in test mode)
Storage → Enable and set rules for image uploads
Copy the Firebase config from your project and paste it into:
javascript
Copy code
// src/firebase.js
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_APP.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_APP.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
▶️ Run the App
bash
Copy code
npm start
Open your browser and visit: http://localhost:3000
📂 Project Structure
pgsql
Copy code
Instagram-Clone/
├── public/
│ └── index.html
├── src/
│ ├── components/
│ │ ├── Post.js
│ │ ├── ImageUpload.js
│ │ ├── SignUpLogin.js
│ ├── firebase.js
│ ├── App.js
│ └── index.js
├── package.json
└── README.md
📸 Demo Suggestions (Add Screenshots/GIFs)
📥 Login Page
🖼 Upload Section
💬 Real-time Commenting
💡 Future Enhancements
Add like and follow features
Add user profile pages with display pictures
Integrate messaging functionality with Realtime DB
Deploy to Firebase Hosting or Netlify