iamtalwinder / instagram-clone

A bare minimum clone of Instagram

Instagram Clone

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Features
   • Built With
   • Screenshots
   • Signin
   • Signup
   • Home
   • Likes
   • Comments
   • Explore
   • User Search
   • New Post
   • Profile
   • Edit Profile
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contributing
5. License
6. Contact

About The Project

This project is a bare minimum clone of instagram

Features

• Upload post
• Delete post
• Like
• Comment
• Follow
• Unfollow
• Feeds
• Explore
• Search users
• Edit profile
• Login with Facebook
• Discover People
• Save post
• Activity
• Stories
• DM
• Share post
• Private Account
• Temporary Disable Account
• Block user

Built With

• Nodejs
• Express
• Mysql
• React

Screenshots

Signin

Signup

Home

Likes

Comments

Explore

User Search

New Post

Profile

Edit Profile

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Make sure you have these installed before moving on:

• nodejs v12.16.1 or up
• npm v6.13.4 or up
• mysql v8.0.19 or up

Installation

1. Clone the repo

   git clone https://github.com/iamtalwinder/instagram-clone.git

2. Register app on facebook (optional)

   If you want to login to your app with facebook you need to register it here.

   1. Create facebook developers account.
   2. Register you app.
   3. Save app id and app secret.

3. Setting up client

   1. Installing pakages

      Open terminal in client directory and run:

      npm install

   2. Creating .env file

      1. Create .env file in client directory

      2. Add following variables in it:

         REACT_APP_FACEBOOK_APP_ID=<your facebook app id>
         REACT_APP_FACEBOOK_REDIRECT_URI=http://localhost:3000
         

   3. Running client

      Open terminal in client directory and run:

      npm start

4. Setting up server

   1. Installing pakages

      Open terminal in server directory and run:

      npm install

   2. Setting up database

      With workbench

      1. Open workbench
      2. Login with root account
      3. Open script.sql in workbench
      4. Press ctrl + shift + enter

      With terminal

      1. Open terminal

      2. Run

         mysql -u root -p

      3. Enter your password

      4. Run

         source <path to script.sql>

         Example:

         source D:/projects/instagram-clone/server/script.sql

      At this point you should have these:

      DATABASE: instagram_clone
      USER: instagram_clone
      USER_PASSWORD: instagram_clone
      

   3. Creating .env file

      1. Create .env file in server directory

      2. Add following variables in it:

         PORT=4000
         
         DB_HOST=localhost
         DB_USER=instagram_clone
         DB_PASSWORD=instagram_clone
         DB_NAME=instagram_clone
         
         SESSION_SECRET=dsakjnbbhvbcnsdafmsvajngvhcnmhvnsglngnnhgsdgh
         SESSION_COOKIE_NAME=USER_SID
         
         FACEBOOK_APP_ID=<your facebook app id>
         FACEBOOK_APP_SECRET=<your facebook app secret>
         FACEBOOK_REDIRECT_URI=http://localhost:3000/
         

   4. Running server

      Open terminal in server directory and run

      npm start

      or

      nodemon server.js

5. Running both server and client with one command

   Open terminal in server directory and run:

   npm run dev

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

See CONTRIBUTING.md for full information on how to contribute.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Talwinder Singh - @iam_talwinder - [e-mail]