Skip to content

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.

Notifications You must be signed in to change notification settings

asha-saini06/instagram-clone

Repository files navigation

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:
git clone https://github.com/asha-saini06/instagram-clone.git
  1. Navigate into the project directory:
cd instagram-clone
  1. Install dependencies using npm or yarn:
npm install

or

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

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

REACT_APP_FIREBASE_API_KEY=<your-api-key>
REACT_APP_FIREBASE_AUTH_DOMAIN=<your-auth-domain>
REACT_APP_FIREBASE_PROJECT_ID=<your-project-id>
REACT_APP_FIREBASE_STORAGE_BUCKET=<your-storage-bucket>
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=<your-messaging-sender-id>
REACT_APP_FIREBASE_APP_ID=<your-app-id>
  1. Start the development server:
npm start

or

yarn start
  1. Open your browser and navigate to http://localhost:3000 to view the application.

Login Details

Email: toge@gmail.com
Password: inumaki

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages