Instagram Clone

A React-based Instagram clone with Firebase authentication, Google OAuth, and Firebase database, storage, and Tailwind CSS for styling.

Auth Page

Feed (Desktop )

Feed (Tabs )

Search

Create Post

Profile

Features

v1.0

• Responsive Design✅

• Cool NavBar on Mobile✅

• Firebase Authentication✅

• Google OAuth✅

• Feed Page✅

• Create Post✅

• Like Post✅

• Delete Post✅

• Profile Page✅

• Update Profile✅

• Suggest Users✅

• Search Users✅

• Follow/Unfollow User✅

Upcoming Plans

---

v2.0

• Image Popup at Profile ✅
• Username Validation on updating Profile
• Comment System
• Followers and Followings List
• List Saved and Liked Post
• Update Password

v3.0

• Chat Messages
• Reels
• Public & Private Account
• Story

Tech Stack

---

• React
• Firebase
  • Authentication
  • Database
  • Storage
• Tailwind CSS
• React Router DOM
• React-Hot-Toast

Getting Started

---

Setup firebase.js file

import{initializeApp}from"firebase/app";import{getAuth}from"firebase/auth";import{getFirestore}from"firebase/firestore";import{getStorage}from"firebase/storage";constfirebaseConfig={apiKey:,authDomain:,projectId:,storageBucket:,messagingSenderId:,appId:,measurementId:};constapp=initializeApp(firebaseConfig);constfirestore=getFirestore(app);conststorage=getStorage(app);exportconstauth=getAuth(app);export{firestore,storage};

Install dependencies

npm install

Start the app

npm run dev

Contributing

---

Contributions are welcome! If you'd like to contribute to this project, please fork the repository and submit a pull request with your changes.

Acknowledgments

---

• Firebase for providing an amazing platform for building web applications
• Tailwind CSS for making styling a breeze
• React Router DOM for simplifying client-side routing
• React-Hot-Toast for providing a simple and customizable notification system