/whatsapp-clone-socket.io

🚨 Tutorial

This repository contains the corresponding tutorial available on our YouTube channel, Code Scrapper.

🤖 Introduction

In this comprehensive tutorial, you’ll learn how to build a fully functional WhatsApp clone using React.js, Node.js, Socket.io, Tailwind css and Cloudinary. This step-by-step guide will walk you through the entire process, from setting up the frontend with React.js to implementing real-time messaging with Socket.io, managing media uploads with Cloudinary, and building a robust backend with Node.js.

Tech Stack

  • React.js
  • MongoDB
  • Node js
  • mantine UI
  • Socket.io
  • Mongoose ODM
  • Tailwind Css

Integration and Installation Process

Follow these steps to set up the project locally on your device.

Prerequisites

Make sure you have the following installed on your machine:

Clone backend

git clone -b backend git@github.com:CodeScrapper1/whatsapp-clone-socket.io.git
cd backend

Set Up backend Environment Variables

Create a new file named .env in the backend of your project and add the following content:

PORT=
FRONTEND_URL=http://localhost:3000
MONGODB_URL=
JWT_SECRET_KEY=
JWT_EXPIRE=
COOKIE_EXPIRE=

Clone frontend

git clone -b frontend git@github.com:CodeScrapper1/whatsapp-clone-socket.io.git
cd frontend

Set Up frontend Environment Variables

Create a new file named .env in the frontend of your project and add the following content:

REACT_APP_BACKEND_URL="http://localhost:5000"
REACT_APP_CLOUDINARY_NAME=

Installation

Install dependencies using yarn:

yarn

Running the Project using yarn

yarn run dev