https://github.com/chetannn-github/instagram-react-firebase
Social Media Website using React & Firebase.
https://github.com/chetannn-github/instagram-react-firebase
firebase firebase-database react-router-dom reacthottoast reactjs redux responsive-web-design tailwind-css
Last synced: 6 months ago
JSON representation
Social Media Website using React & Firebase.
- Host: GitHub
- URL: https://github.com/chetannn-github/instagram-react-firebase
- Owner: chetannn-github
- Created: 2024-07-30T07:05:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-03T14:30:09.000Z (over 1 year ago)
- Last Synced: 2025-06-08T14:42:25.541Z (7 months ago)
- Topics: firebase, firebase-database, react-router-dom, reacthottoast, reactjs, redux, responsive-web-design, tailwind-css
- Language: JavaScript
- Homepage: https://ig-k2wa.onrender.com/
- Size: 9.44 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: ,
authDomain:,
projectId:,
storageBucket: ,
messagingSenderId: ,
appId: ,
measurementId:
};
const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);
const storage = getStorage(app);
export const auth = getAuth(app);
export {firestore, storage};
```
### Install dependencies
```shell
npm install
```
### Start the app
```shell
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