Created a clone of Instagram using MERN stack.

Instagram Clone Official Website »
Report Bug · Request Extension

• Overview
• Folder Structure
• Prerequisites
• Snapshots of this Project
• Open Source programs this repo has been part of
• Contribution Guidelines
• Contributors
• Feedback

(Bottom)

Instagram Clone | MERN Stack

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

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)

• 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...

(back to top)

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

(back to top)

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

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

(back to top)

run the script at the first level:

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

$ 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)

(back to top)

(back to top)

(back to top)

• 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 📁 .

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 ❗ You have made a PR to the harshita2216/hello-jobs 💥 . 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)

Thanks to all the people who contribute 💜

(back to top)

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)