Skip to content

A reactive Single-Page Instagram-Clone with some new features!! πŸ’ͺπŸ“ΈπŸ‘“ - No longer maintained.

License

Notifications You must be signed in to change notification settings

yTakkar/React-Instagram-Clone-2.0

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React-Instagram-Clone-2.0

A reactive Single-Page Instagram-Clone with some new features!!

No longer maintained. But it works


πŸ›’ Launch your online store with OwnStore.


Another Version

PHP Version

Quick liks

  1. Requirements
  2. Usage
  3. Todo
  4. Contribute
  5. Image Copyright Claims

Here's a video which will take you on a tour of this project.

Note: Many improvements were done after recording this video.

IMAGE ALT TEXT HERE

Requirements

  1. GraphicsMagick for Image-processing.

Usage

  1. Fork the repo and then clone it or download it.

  2. First install all dependencies:

    # with npm
    npm install
    
    # or with yarn
    yarn
  3. Open PHPMyAdmin, create a DB & import db.sql file.

  4. Create a .env file and insert the following code. Replace values with yours!!

    PORT=YOUR_PORT
    SESSION_SECRET_LETTER="anything-secret"
    MYSQL_HOST="host"
    MYSQL_USER="user"
    MYSQL_PASSWORD="password"
    MYSQL_DATABASE="db"
    MAIL="your-email-for-sending email-verification-link"
    MAIL_PASSWORD="password-for-email"
    GOOGLE_GEOLOCATION_KEY='google-geolocation-key'
    ADMIN_PASSWORD='password-for-admin'
  5. For front-end layer of this app to get access to env variables defined in .env file, run

    yarn env
  6. Start the server

    npm start [OR] yarn start
  7. Now run the app

    localhost:[PORT] (PORT=defined in .env)
    

Todo

  • More image filters
  • Search
  • Block members
  • Hashtag feature
  • Mention members
  • JSDoc & comments
  • Admin system
  • Show if member is online
  • Show all online members (whome you've followed)
  • Description with react-helmet for SEO
  • Some serious code refactoring
  • Crush some bugs
  • Remove jQuery
  • UI testing
  • Folder restructuring
  • Performance optimization (Code Splitting, Image Lazyload, etc.)
  • Express routes testing
  • Like comments
  • Upgrade packages
  • Story feature
  • Show mutual likes, comments & shares

Contribute

Show your support by 🌟 the project!!

Feel free to contribute!

Image Copyright Claims

Many images used in the project belong to their respective creators/authors. No claim by me & those who use this project. :)

Thanks for reading

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]