ytakkar / react-instagram-clone-2.0

A reactive Single-Page Instagram-Clone with some new features!! 💪📸👓 - No longer maintained.

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.

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]

react-instagram-clone-2.0's Issues

How to access admin panel?

I have imported db.sql into mysql database and everything seems to be correctly populated. I am wondering how to access the admin screen with the credential that I modified in the .env file.

Is there an URI for admin?

Thanks,

yarn or npm start error

bundle

Generating bundle.js file

error

Now if I publish a photo, it appears, but disappears when the page is refreshed!

Serious Issues When "npm start"

app.post('/user/username-checker', async (req, res) => {
^

SyntaxError: Unexpected token (
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object. (/home/user/public_html/app-routes.js:5:11)
[nodemon] app crashed - waiting for file changes before starting...

can you pleas list me the steps required to run this on my local computer and how to do it

get build error - npm run prod

npm run prod

and become an error, see below ...
What's wrong?

webpack -p --watch
Webpack is watching the files…

Hash: e2492dcef8dc58606630
Version: webpack 3.11.0
Time: 28710ms
    Asset     Size  Chunks                    Chunk Names
bundle.js  1.06 MB       0  [emitted]  [big]  main
   [6] ./public/js/src/utils/utils.js 50.5 kB {0} [built]
  [25] ./public/js/src/store/actions/message-a.js 3.17 kB {0} [built]
  [34] ./public/js/src/store/actions/notification-a.js 1.54 kB {0} [built]
 [160] ./public/js/src/main.js 1.13 kB {0} [built]
 [161] ./public/js/src/user-system/user-system.js 6.12 kB {0} [built]
 [253] ./public/js/src/store/store.js 2.07 kB {0} [built]
 [258] ./public/js/src/store/reducers/user-r.js 1.41 kB {0} [built]
 [259] ./public/js/src/store/reducers/follow-r.js 3.14 kB {0} [built]
 [260] ./public/js/src/store/reducers/notification-r.js 1.12 kB {0} [built]
 [261] ./public/js/src/store/reducers/post-r.js 5.33 kB {0} [built]
 [266] ./public/js/src/store/reducers/explore-r.js 1.09 kB {0} [built]
 [267] ./public/js/src/store/reducers/group-r.js 2.67 kB {0} [built]
 [268] ./public/js/src/store/reducers/message-r.js 3.56 kB {0} [built]
 [269] ./public/js/src/store/reducers/setting-r.js 996 bytes {0} [built]
 [270] ./public/js/src/store/reducers/hashtag-r.js 1.15 kB {0} [built]
    + 434 hidden modules

ERROR

ERROR in ./public/js/src/components/post/post-it/post-it.js
Module not found: Error: Can't resolve '../../../../../../browser-env' in 'D:\development\www\flow\react\public\js\src\components\post\post-it'
 @ ./public/js/src/components/post/post-it/post-it.js 64:18-58
 @ ./public/js/src/components/post/post-it/post-it-teaser.js
 @ ./public/js/src/components/home/home.js
 @ ./public/js/src/components/App.js
 @ ./public/js/src/main.js

ERROR in ./public/js/src/components/group/group-banner.js
Module not found: Error: Can't resolve '../../../../../browser-env' in 'D:\development\www\flow\react\public\js\src\components\group'
 @ ./public/js/src/components/group/group-banner.js 62:18-55
 @ ./public/js/src/components/group/group.js
 @ ./public/js/src/components/App.js
 @ ./public/js/src/main.js

ERROR in ./public/js/src/components/post/post.js
Module not found: Error: Can't resolve '../../../../../browser-env' in 'D:\development\www\flow\react\public\js\src\components\post'
 @ ./public/js/src/components/post/post.js 66:18-55
 @ ./public/js/src/components/hashtag/hashtag.js
 @ ./public/js/src/components/App.js
 @ ./public/js/src/main.js

ER_NO_DEFAULT_FOR_FIELD: Field 'bio'

Hey going through your code....

When I try to register on my built version , it crashes with...

This is usually caused from an Insert that is missing a default value. What is missing from this? Surely this would be a known issue.
(node:16876) UnhandledPromiseRejectionWarning: Error: ER_NO_DEFAULT_FOR_FIELD: Field 'bio' doesn't have a default value at Query.Sequence._packetToError (/home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/mysql/lib/protocol/sequences/Sequence.js:52:14) at Query.ErrorPacket (/home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/mysql/lib/protocol/sequences/Query.js:77:18) at Protocol._parsePacket (/home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/mysql/lib/protocol/Protocol.js:279:23) at Parser.write (/home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/mysql/lib/protocol/Parser.js:76:12) at Protocol.write (/home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/mysql/lib/protocol/Protocol.js:39:16) at Socket.<anonymous> (/home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/mysql/lib/Connection.js:103:28) at emitOne (events.js:116:13) at Socket.emit (events.js:211:7) at addChunk (_stream_readable.js:263:12) at readableAddChunk (_stream_readable.js:250:11) -------------------- at Protocol._enqueue (/home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/mysql/lib/protocol/Protocol.js:145:48) at Connection.query (/home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/mysql/lib/Connection.js:208:25) at Promise (/home/appsec/Desktop/React-Instagram-Clone-2.0/config/db.js:13:8) at new Promise (<anonymous>) at Object.query (/home/appsec/Desktop/React-Instagram-Clone-2.0/config/db.js:12:10) at bcrypt.hash (/home/appsec/Desktop/React-Instagram-Clone-2.0/config/User.js:23:10) at /home/appsec/Desktop/React-Instagram-Clone-2.0/node_modules/bcrypt-nodejs/bCrypt.js:631:3 at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9) (node:16876) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:16876) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Installation

Hi, I'm new in React, is there an installation tutorial, I have centos 7, thank you!

picture upload. Please wait

Uploading Videos

UI is looking very nice, along with the entire idea + features this clone has to offer.
Do you plan on implementing support for uploading videos and a way to categorize/filter between them? (example being: view photos/videos only from each user / from the explore page?)

Visitor of a profile can see Edit profile buttons and edit field links in About page

When a user visits another user's profile, the edit button and edit profile is enabled for that user. The visitor should not be allowed to see the edit profile button and field edit links for another user.

ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

Thanks for the help. Finally got your react app running but I got the following mysql client error every time when I start the app.

chaoman@ubuntu_server_nodejs:~/React-Instagram-Clone-2.0$ sudo npm start        
> [email protected] start /home/chaoman/React-Instagram-Clone-2.0
> nodemon app.js

[nodemon] 1.17.5
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node app.js`
**ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client**
App running..

I am using mysql client that installed from Ubuntu 18's repo
mysql Ver 14.14 Distrib 5.7.22, for Linux (x86_64) using EditLine wrapper

Any tip would be appreciated.

getting error while signup

{ Error: Cannot enqueue Query after fatal error.
at Protocol._validateEnqueue (/Users/anup.kumar1/Documents/React-Instagram-Clone-2.0/node_modules/mysql/lib/protocol/Protocol.js:201:16)
at Protocol._enqueue (/Users/anup.kumar1/Documents/React-Instagram-Clone-2.0/node_modules/mysql/lib/protocol/Protocol.js:139:13)
at Connection.query (/Users/anup.kumar1/Documents/React-Instagram-Clone-2.0/node_modules/mysql/lib/Connection.js:208:25)
at Promise (/Users/anup.kumar1/Documents/React-Instagram-Clone-2.0/config/db.js:18:8)
at new Promise ()
at Object.query (/Users/anup.kumar1/Documents/React-Instagram-Clone-2.0/config/db.js:17:10)
at app.post (/Users/anup.kumar1/Documents/React-Instagram-Clone-2.0/routes/user/login-routes.js:42:21)
at
at process._tickCallback (internal/process/next_tick.js:182:7) code: 'PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR', fatal: false }

Can i use it on Ubuntu 16.04?

Hello my friend,
As first, you created awesome script. I want to test it for fun on my server, so i must ask you.

Can i use it on Ubuntu 16.04 with Apache2, PHP 7, MySQL, Node.js, npm?
It's all what i need? (Except requirements what you have noticed)?
Thanks :-)

Explore image shows image but no username or profile link.

Explore images shows a bunch of images but no information related to it... In instagram or facebook for example, when someone opens an image, it shows the user who posted the image and comments.. Not having comments is fine for images but an overlay with username and link to user profile should be there. I don't think just showing random images without any links to user is useful.

Error

How fix error?
GraphicsMagick INSTALL
add post
(node:10332) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Could not execute GraphicsMagick/ImageMagick: gm "convert" "-quality" "100" "C:\Users\sskat\Desktop\social\public\temp\85dc5e6f6c152b397863f665663a1cbc" "-gravity" "NorthWest" "C:\Users\sskat\Desktop\social/public/posts/instagram_1523615382784.jpg" this most likely means the gm/convert binaries can't be found
(node:10332) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

npm run dev - webpack - no starting local web-dev-server

if i run by
npm run dev
Files are generated / compiled by webpack fine - so far so good.

But the --watch (webpack -d --watch) parameter does not work for me,

I meant,

1. actually a local web server would have to start with
2. the app.js would have to be run (like localhost: 9999 -> .env vars?)

this not an issue it just a question

please is this program responsive on any device? plus does it have the same features as the php version?

mostly jquery!!

brilliant work, really !! But the project name should be react + jquery instagram clone.

please help admin

Please
Create a video to learn

Server Graphic

If I set up GraphicsMagick on the server, does it work for all users?

Suggestion: Responsive layout

Man, you have really done amazing work..! The only thing that I find could be updated is a responsive layout, considering the % of smartphone users nowadays.

Keep learning the magic!

Error thrown when starting with yarn start

I followed along the installation instruction but encountered the following error when starting with yarn start command.

I am running the following environment:

• Ubuntu 18
• npm 3.5.2
• yarn 1.6.0
• node 8.10.0

chaoman@localhost:~/React-Instagram-Clone-2.0$ sudo yarn start
yarn run v1.6.0
$ nodemon app.js
[nodemon] 1.17.5
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node app.js`
module.js:549
    throw err;
    ^

Error: Cannot find module '../../../config/mail'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/chaoman/React-Instagram-Clone-2.0/routes/api/others/edit-routes.js:6:10)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
[nodemon] app crashed - waiting for file changes before starting...

Do you have any clue when I couldn't start?

SyntaxError: Unexpected token (

I get an error - after
npm start

in ... routes\user-routes.js:27

app.post('/user/username-checker', async (req, res) => {
                                         ^
SyntaxError: Unexpected token (
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

Adding new fields and section

Nice work. Looking to add new fields but did not see any config in admin panel. I added the new fields in db.sql, added in social-inputs, edit-profile.js but new fields not showing up.
How to add new fields for user profile and add new sections such as "Personal" , "Business" etc..
Thanks

admin panel

I love this script ... but add admin panels.
or is it present?

this not an isssue just a question.

how can i deploy this on a production server like aws or with serverless

Image dimensions in gallery do not maintain aspect ratio

The react image gallery that is used is fed with settings height=15 and width=15. When a user uploads an image that is 600px wide and 400px tall, it is getting distorted into a square image and not maintaining the aspect ratio. How can this be fixed ?

Add preview route without login like tumblr

It‘s possible to create a preview route (Maybe below the Login.hbs) from some content like tumblr.

After Click of a content item (e.g. Heart-Icon or username) the User have to verified by his User and password.

can you give me a hint for code Adaptation

User remains logged in for hours which is a security issue.

Users should be logged out when idle after a specific time. I noticed the users never get logged out. This might pose security code concerns. Thanks.

Not an issues

i got this error when im try to start app, can u help me?
Error: Cannot find module './routes/user-routes'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object. (C:\xampp\htdocs\React-Instagram-Clone-2.0-master\app.js:28:11)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
[nodemon] app crashed - waiting for file changes before starting...

I am getting an error after npm start

internal/modules/cjs/loader.js:573
throw err;
^

Error: Cannot find module 'dotenv'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
at Function.Module._load (internal/modules/cjs/loader.js:497:25)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/home/ryptozee/Documents/Projects/React-Instagram-Clone-2.0/app.js:9:1)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)

uploading photo error

when im post photo in localhost the app freeze at posting menu. when im check the console its say

(node:1396) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejec
tion id: 1): Error: Could not execute GraphicsMagick/ImageMagick: gm "convert" "
-quality" "100" "C:\Users\DIEVIRA\Downloads\Compressed\React-Instagram-Clone-2.0
-master\public\temp\97d6933d99bee10a2dcd9562687ab1a1" "-gravity" "NorthWest" "C:
\Users\DIEVIRA\Downloads\Compressed\React-Instagram-Clone-2.0-master/public/post
s/instagram_1518272820657.jpg" this most likely means the gm/convert binaries ca
n't be found
(node:1396) [DEP0018] DeprecationWarning: Unhandled promise rejections are depre
cated. In the future, promise rejections that are not handled will terminate the
Node.js process with a non-zero exit code
any solution? im trying to make a social app for my school so hope u want to help me with your project @yTakkar

error webpack

Look
npm run dev

on which node version its working ?

upload photos

picture upload
not uploaded

new

Are there any more news? on the instagram clone website

error

events.js:183
throw er; // Unhandled 'error' event
^

Error: Connection lost: The server closed the connection.
at Protocol.end (C:\Users\rever\Desktop\test\node_modules\mysql\lib\protocol\Protocol.js:113:13)
at Socket. (C:\Users\rever\Desktop\test\node_modules\mysql\lib\Connection.js:109:28)
at emitNone (events.js:111:20)
at Socket.emit (events.js:208:7)
at endReadableNT (_stream_readable.js:1056:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
[nodemon] app crashed - waiting for file changes before starting...

AND ERROR REGISTER

(node:10588) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ER_NO_DEFAULT_FOR_FIELD: Field 'bio' doesn't have a default value
(node:10588) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Re - Change in code does not reflect

I am running code as
Npm Start dev - Code is running fine,

When i change Style.css file , it reflects in app immediately.
Buy if i change some text like below in \public\js\src\components\others\header.js
This is not reflected
Note : I have changed text - Settings to SettingsChange.

<li className='o_li'>
              <a href='/settings' className='o_a' alt='SettingsChange'>SettingsChange</a>
            </li> 

Can anyone guide me for this
Thanks
Arjun

error starting app.js at shared web hosting

can anyone guide me to run this app at my shared web hosting?i was follow the instruction but its still crash and this the error log on terminal.
/home/kingmed3/kingvisor.com/routes/user-routes.js:27
app.post('/user/username-checker', async (req, res) => {
^

SyntaxError: Unexpected token (
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object. (/home/kingmed3/kingvisor.com/app.js:28:11)
[nodemon] app crashed - waiting for file changes before starting...

webpack scss

Excuse me please!
Why when I compile the application, js is compiled, css is not?
I changed the css file but it does not change when rebuilding
public/js/dist/ - yes
public/styles/dist/ no

please make tutorial on how to run on windows 10

please help me , how to run on windows 10 ?

Deployment

So I have followed all the steps and get to APP is running with rainbow colors..

I visit my localhost + port and just get the file directory?

What am I missing?

Is there a certain folder to execute npm start in or do I need to bundle the package or what step is needed that is NOT mentioned in the 7 steps under usage?

Uppercase chars in fields gets stripped on update profile

When saving user profile characters gets deleted if it is uppercase

Need to Know about a Feature

Does this one have video, audio and picture uploading features?
I need the features please.
I WILL LOVE TO SEE A REPLY AS SOON AS POSSIBLE
Thanks

Compilation doesnt work on SRC folder

Hi faiyaz you have done a brilliant job in writing this clone app in a very clean and professional coding style. I am using it for a while and trying to do customization according to my needs but unfortunately cant see any changes doing in SRC folder. Im sure its to do with with respective compiler like webpack or to do with nodenom, but cant figure out exactly. Can you please help ?

database

App is very good nice effort but isn't it good if database ia changes to mongodb because many people use it and its easy to expand

some dependency error

correct me if i'm wrong but it seems that handy-client-env is not included in the dependencies?thanks for this project!

please help. npm or yarn start error

visual studio code

npm start

[email protected] start D:\инс\React-Instagram-Clone-2.0-master (1)\React-Instagram-Clone-2.0-master
nodemon app.js

[nodemon] 1.17.1
[nodemon] to restart at any time, enter rs
[nodemon] watching: .
[nodemon] starting node app.js
module.js:549
throw err;
^

Error: Cannot find module 'dotenv'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (D:\инс\React-Instagram-Clone-2.0-master (1)\React-Instagram-Clone-2.0-master\app.js:1:63)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
[nodemon] app crashed - waiting for file changes before starting...