A reactive Single-Page Instagram-Clone with some new features!! πŸ’ͺπŸ“ΈπŸ‘“
Branch: master
Clone or download
Latest commit 73b0672 Oct 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Formatted code with Prettier Jul 1, 2018
__mocks__ Mocked handy-timeago module Jun 27, 2018
config Formatted code with Prettier Jul 1, 2018
dist Formatted code with Prettier Jul 1, 2018
routes Formatted code with Prettier Jul 1, 2018
src Formatted code with Prettier Jul 1, 2018
styles Some serious code refactoring May 19, 2018
views Some serious code refactoring May 19, 2018
.babelrc Initial commit Feb 7, 2018
.editorconfig Initial commit Feb 7, 2018
.eslintignore Some serious code refactoring May 19, 2018
.eslintrc.js Formatted code with Prettier Jul 1, 2018
.gitattributes Initial commit Feb 7, 2018
.gitignore Added some silly tests to some util fns Mar 21, 2018
LICENSE Initial commit Feb 7, 2018
README.md Update README.md Oct 14, 2018
app-routes.js Formatted code with Prettier Jul 1, 2018
app.js Formatted code with Prettier Jul 1, 2018
db.sql Finished UI testing. 100% JSX converage Jun 10, 2018
jest.config.js Formatted code with Prettier Jul 1, 2018
jest.setup.js Formatted code with Prettier Jul 1, 2018
jest.setupScriptFile.js Renamed jest config files to more understandable names Jun 23, 2018
nodemon.json Some serious code refactoring May 19, 2018
package-lock.json Added progress bar from webpack bundling Jun 29, 2018
package.json Formatted code with Prettier Jul 1, 2018
prepros-6.config Some serious code refactoring May 19, 2018
tsconfig.json Initial commit Feb 7, 2018
webpack.config.js Formatted code with Prettier Jul 1, 2018
yarn.lock Formatted code with Prettier Jul 1, 2018

README.md

React-Instagram-Clone-2.0

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

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