/WhatsApp-Clone

This is a clone of WhatsApp web, and was made in ReactJS, Sass, Socket.io, NodeJS and MongoDB with mongoose.

Primary LanguageJavaScript

WhatsApp Clone WhatsApp

This is a WhatsApp clone, and was built as a study of socket.io and its integration with ReactJS. Was made with:

  • ReactJS
  • Nodejs
  • MongoDB
  • Typescript and Javascript
  • Socket.IO
  • JsonWebToken

The backend can be found here

ProjectImage

Features 🔥

🟢 Login and register with JsonWebToken

🟢 User can add another users to talk one-to-one in real-time

🟢 User can vizualize if another user is typing a new message.

🟢 User can see if another user is online, and if not, the app will show the last seen

🟢 If another user vizualize your message, the message status will change the color

🟢 If user not focusing in browser tab, the messages screen will blur, and will appear that the user is offline

🟢 Show "sending" status when the message not sent yet

💁🏻 if you want to make more features, you can fork this repository, I'm will very happy to see this :)

Technologies 🛠️

  • ReactJS React
  • Create-react-app
  • Socket.io Socketio

Prerequisites 🧶

  • NodeJS Nodejs
  • A Package Manager yarn

Instalation ⚙️

Step 1

Clone this repository with git clone

git clone https://github.com/GabrSobral/WhatsApp-Clone.git

Step 2

Install all dependencies with yarn or npm install command

Step 3

Verify if the API is running on your local machine, the link for the API is here

Step 4

After that, run start script with npm or yarn

yarn start

Made with great care (and effort) by GabrSobral 💙