DEV Community

Justin Maximillian Kimlim
Justin Maximillian Kimlim

Posted on

Whatsapp clone with MERN stack (Mongodb, Express, React, Node)

Alt Text
Hello developers, I've recently created a web-based Whatsapp Clone and I'm looking for comments as I'm beginner to the MERN stack. Any comments will be appreciated. Thanks.

Code: https://github.com/kimlimjustin/whatsapp-clone

Top comments (23)

Collapse
 
qusaionali profile image
Qusai Onali

what is
ATLAS_URI
SECURITY_KEY
CLIENT_URL
REACT_APP_SECURITY_KEY
REACT_APP_BACKEND_URL
and where to find them?

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim

Hello, Qusai.
ATLAS_URI is your mongodb atlas URI. You can get it after registering in MongoDB Atlas.
SECURITY_KEY is a security key used for interaction between client and server. You can just give a random string for it.
CLIENT_URL is just your client URL, localhost:3000 if you run in local machine
REACT_APP_SECURITY_KEY is just same as SECURITY_KEY. Note that the value between them must be the same.
REACT_APP_BACKEND_URL is just your server URL, localhost:5000 is the default if you run in local machine.

Collapse
 
qusaionali profile image
Qusai Onali • Edited

Still, it doesn't load up.

  1. dev-to-uploads.s3.amazonaws.com/up... after opening in localhost 3000 I cant click the submit button
Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

Did you clone the latest version? Otherwise, I'll figure it out!

Thread Thread
 
qusaionali profile image
Qusai Onali

yeahh i cloned it yesterday, so i guess its new. IF YOU ARE FREE can we have a small video call type meet where I can share my screen with you? Is that okay? Btw, thanks for swift replies ;)

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

I'm sorry but I'm not free now, but I think we can just use the dev.to chat feature, or just commenting here. Btw I tested the latest version and it's good in mine, and please try to run npm install again.

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

NB: just run npm install in your server folder. Your client folder works fine, it's likely the problem with server folder

Thread Thread
 
qusaionali profile image
Qusai Onali

Did it again, a new command came npm fund , fired it, still same error

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

Could you please send the log file?

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

Btw, it's problem with npm fund, npm fund is used for funding contributors of packages

Thread Thread
 
qusaionali profile image
Qusai Onali

wheres the log file? and what to do now?

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

In your error, there's a log file link in the last error xd. Btw, could we just communicate use the instant message service?

Thread Thread
 
qusaionali profile image
Qusai Onali

Yeah, we need to mutually follow each other to chat on DEV.to
that's my log file: dev-to-uploads.s3.amazonaws.com/up...

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

Firstly, is your npm is installed successfully with its PATH environment variable? I think this is because your npm is not registered in your PATH environment variable. Please check it by opening path > Environment Variables > PATH > Edit.

Collapse
 
smashell10 profile image
Muhammad Faayez

@qusaionali comment this line out "res.setHeader("Access-Control-Allow-Origin", process.env.CLIENT_URL)" in index.js inside the server folder, the submit button started working for me after that

Collapse
 
hamza12337 profile image
HAMZA BRAIMI

client@0.1.0 start C:\Users\hamza\Downloads\whatsapp-clone-master\client
react-scripts start

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@0.1.0 start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim

Please run "npm install" to install dependencies as mentioned in README file

Collapse
 
hamza12337 profile image
HAMZA BRAIMI

i do all this ,and nothing happing can you help me please

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

Yeah sure, where did you run the command? There are 2 sub directories on the project, client and server, you should run the command there

Thread Thread
 
hamza12337 profile image
HAMZA BRAIMI

hi please bro! id dont know if i can do run just to the sub of client

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

just get into the folder on your terminal, by typing cd client to get into the client folder

Look at this example of my terminal:
https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7839tx6akfevqce861s8.png

Btw, you can chat with me for further information about the setup. In addition, WhatsApp clone has been updated for the bug in which you should clone the latest version to avoid bug

Collapse
 
nishchit6 profile image
Nishchith Rao

Best!!!!

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim

Thanks