Instagram Clone

Created a clone of Instagram using MERN stack.

Instagram Clone Official Website »
Report Bug · Request Extension

(Bottom)

Overview

Instagram Clone | MERN Stack

Features:

Uers can update their profile and sort posts based on their followings User authetication with enability to reset password via email notification Lets users post images with title Lets users like & dislike posts Lets users comment on others post Lets users view other users profile Lets user follow & unfollow other users Search feature to search people on this webiste

About

I started developing a social media app in my spare time for about 2 months or so and ended up with this cool Instagram-Clone! Basically it allows you to login and upload posts (with images & coordinates), search posts (by names), like and comment on posts.

I learnt a lot about react & backend stuff while doing this including:

• best ways to upgrade a projects packages (which proves to be hard some times)
• write clean client-side & server-side modules
• changing the boilerplate
• optimize bits of code
• much more...

(back to top)

What I learnt about react

• It's really easy to prototype web-apps quickly, but when it comes to refining them and adding smaller details, the development time starts to slow down.
• The styling is quite hard, at first, to get right.
• It's got an amazing community that spends a lot of time improving the codebase everyday!

• Changing react versions can prove to be a hard task. Build error, npm package dependcies, and more...

  Tech-Stack used :

  

(back to top)

Folder Structure

client/
  public
  src
config
middleware
models
routes
   app.js
   package-lock.json
   package.json
...

(back to top)

Prerequisites

Usage (run fullstack app on your machine)

• MongoDB
• Node ^10.0.0
• npm

notice, you need client and server runs concurrently in different terminal session, in order to make them talk to each other

Client-side usage(PORT: 3000)

$ cd client    // go to client folder
$ npm i       // npm install packages
$ npm start  // run the client side app

Server-side usage(PORT: 5000)

(back to top)

Prepare your secret

run the script at the first level:

Start

$ npm i       // npm install packages
$ nodemon app // this will run the server side app

Deploy Server to Heroku

$ npm i -g heroku
$ heroku login
...
$ heroku create
$ npm run heroku:add <your-super-app>
// remember to run this command in the root level, not the server level, so if you follow the documentation along, you may need to do `cd ..`
$ pwd
/Users/<your-name>/mern
$ npm run deploy:heroku

(back to top)

Snapshots of this Project

User can sign in or sign up

User visit Feed page

(back to top)

User can go to his/her profile page

User can visit other users profile and follow/unfollow

(back to top)

Open Source programs this repo has been part of

(back to top)

Contribution Guidelines

 <br />

• Fork this repository.

• Clone your forked copy of the project.

git clone https://github.com/<your_user_name>/Instagram-Clone.git

• Navigate to the project directory :file_folder: .

cd clone-it

• Add a reference(remote) to the original repository.

git remote add upstream https://github.com/riyajha2305/Instagram-Clone.git 

(back to top)

• Check the remotes for this repository.

git remote -v

• Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).

git pull upstream main

• Create a new branch.

git checkout -b <your_branch_name>

• Perfom your desired changes to the code base.

• Track your changes:heavy_check_mark: .

git add . 

(back to top)

• Commit your changes .

git commit -m "Relevant message"

• Push the committed changes in your feature branch to your remote repo.

git push -u origin <your_branch_name>

• To create a pull request, click on compare and pull requests.

• Add appropriate title and description to your pull request explaining your changes and efforts done.

• Click on Create Pull Request.

• Congrats :exclamation: You have made a PR to the harshita2216/hello-jobs :boom: . Wait for your submission to be accepted and your PR to be merged.

• Wait for the pull request to be reviewed by a maintainer, Make changes to the pull request if the reviewing maintainer recommends them.

• Celebrate 🥳 your success after your pull request is merged!

(back to top)

Contributors

Thanks to all the people who contribute 💜

(back to top)

Feedback

If you have any feedback or suggestions please reach out to Project - Maintainer.

• RiyaJha

Or you can create a issue and mention there , which new features can make this Project more good.

(back to top)