Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/asha-saini06/instagram-clone

Instagram Clone project with core features like user authentication, profile management, photo sharing, feed, likes, comments. Using React and Firebase, it is a great resource to learn social media platform development.
https://github.com/asha-saini06/instagram-clone

clone firebase reactjs social-media

Last synced: about 2 months ago
JSON representation

Instagram Clone project with core features like user authentication, profile management, photo sharing, feed, likes, comments. Using React and Firebase, it is a great resource to learn social media platform development.

Awesome Lists containing this project

README

        

# Instagram Clone

This repository contains the code for an Instagram clone, built using React and Firebase. It aims to replicate some of the core features of the popular social media platform Instagram.

## Features

- **Authentication**: Users can sign up for an account, log in, and log out securely.
- **Profile Management**: Users can update their profile information, including their profile picture and bio.
- **Image Upload**: Users can upload images to their profile.
- **Feed**: Users can view posts from other users on their feed.
- **Likes and Comments**: Users can like and comment on posts.
- **Follow/Unfollow**: Users can follow and unfollow other users to see their posts on their feed.

## Technologies Used

- **React**: Frontend framework for building user interfaces.
- **Firebase**: Backend service for authentication, storage, and database functionalities.
- **React Router**: For handling navigation within the application.
- **Chakra UI**: UI library for building accessible and customizable React components.

## Installation

1. Clone the repository:

```bash
git clone https://github.com/asha-saini06/instagram-clone.git
```

2. Navigate into the project directory:

```bash
cd instagram-clone
```

3. Install dependencies using npm or yarn:

```bash
npm install
```
or
```bash
yarn install
```

4. Create a Firebase project and set up authentication, storage, and Firestore database. Copy the Firebase configuration details.

5. Create a `.env` file in the root directory of the project and add the Firebase configuration details in the following format:

```bash
REACT_APP_FIREBASE_API_KEY=
REACT_APP_FIREBASE_AUTH_DOMAIN=
REACT_APP_FIREBASE_PROJECT_ID=
REACT_APP_FIREBASE_STORAGE_BUCKET=
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
REACT_APP_FIREBASE_APP_ID=
```

6. Start the development server:

```bash
npm start
```
or
```bash
yarn start
```

7. Open your browser and navigate to `http://localhost:3000` to view the application.

## Login Details

Email: [email protected]
Password: inumaki