WHATSAPP WEB CLONE

An application which focused on few functionalities of Whatsapp web

Live Website URL: https://whats-app55.netlify.app/

Demonstration Link

https://drive.google.com/file/d/14s7GEqxEKpV5l77oi7coW9j7-7mrxfKc/view?usp=sharing

Project Flow Structure

whatsappweb
├── backend
│   ├── database.js
│   ├── package-lock.json
│   ├── package.json
│   └── server.js
└── frontend
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
    │   ├── vite.svg
    │   └── _redirects
    ├── README.md
    ├── src
    │   ├── App.css
    │   ├── App.jsx
    │   ├── assets
    │   │   ├── bg.png
    │   │   ├── right.png
    │   │   └── video.mp4
    │   ├── Components
    │   │   ├── Dashboard
    │   │   │   ├── Dashboard.jsx
    │   │   │   └── utils.js
    │   │   ├── Landing
    │   │   │   ├── Chatting.jsx
    │   │   │   ├── Landing.jsx
    │   │   │   ├── Navigation.jsx
    │   │   │   └── Video.jsx
    │   │   ├── Left
    │   │   │   ├── Friends
    │   │   │   │   ├── AddFriend
    │   │   │   │   │   ├── AddFriend.jsx
    │   │   │   │   │   └── utils.js
    │   │   │   │   └── DisplayFriends
    │   │   │   │       ├── DisplayFriends.jsx
    │   │   │   │       └── FriendCard
    │   │   │   │           ├── FriendCard.jsx
    │   │   │   │           ├── FriendDrop.jsx
    │   │   │   │           └── utils.js
    │   │   │   ├── LeftBar
    │   │   │   │   ├── Left.jsx
    │   │   │   │   ├── Search.jsx
    │   │   │   │   └── utils.js
    │   │   │   ├── Navigation
    │   │   │   │   ├── UserDrop.jsx
    │   │   │   │   └── UserNav.jsx
    │   │   │   └── Requests
    │   │   │       ├── DisplayRequests.jsx
    │   │   │       ├── RequestCard.jsx
    │   │   │       └── utils.js
    │   │   ├── Right
    │   │   │   ├── ChatRoom
    │   │   │   │   ├── AccountDetails
    │   │   │   │   │   ├── Account
    │   │   │   │   │   │   ├── Account.jsx
    │   │   │   │   │   │   ├── account.module.css
    │   │   │   │   │   │   └── utils.js
    │   │   │   │   │   └── Fields
    │   │   │   │   │       ├── Email.jsx
    │   │   │   │   │       ├── Name.jsx
    │   │   │   │   │       ├── OTP.jsx
    │   │   │   │   │       ├── Password.jsx
    │   │   │   │   │       └── Phone.jsx
    │   │   │   │   ├── Chat
    │   │   │   │   │   ├── Chat.jsx
    │   │   │   │   │   └── utils.js
    │   │   │   │   ├── ChatDisplay
    │   │   │   │   │   ├── ChatDrop.jsx
    │   │   │   │   │   └── DisplayChats.jsx
    │   │   │   │   ├── ChatNav
    │   │   │   │   │   └── ChatNav.jsx
    │   │   │   │   └── ChatType
    │   │   │   │       ├── ChatType.jsx
    │   │   │   │       ├── UploadDocs.jsx
    │   │   │   │       └── utils.js
    │   │   │   └── Right.jsx
    │   │   └── Users
    │   │       ├── Forgot.jsx
    │   │       ├── Login.jsx
    │   │       ├── Passwords.jsx
    │   │       ├── Register.jsx
    │   │       ├── usercss.css
    │   │       ├── utils.js
    │   │       ├── VerifyAccount.jsx
    │   │       └── VerifyPass.jsx
    │   ├── index.css
    │   ├── main.jsx
    │   ├── Spinner.jsx
    │   └── url.jsx
    ├── tailwind.config.js
    └── vite.config.js

Prerequisites

Install PostgreSQL NodeJS

How to run the project in your system

Clone the repo

Run frontend

• cd frontend
• npm install
• npm run dev
• Note: Make sure to change the url in url.js file to localhost

Run Backend

• Note: Make sure to replace the password with your password in server.js and database.js.
• cd backend
• npm install
• node database.js
• Exit from terminal if database created
• nodemon server.js