zgramming / Cloning-Whatsapp-Web

Cloning Whatsapp Web Version

Cloning Whatsapp Web

Cloning Whatsapp Web

Tech Stack

Client: Typescript, Next JS, Redux Toolkit, Socket IO Client, Mantine UI, Tailwind CSS, ESLint AirBNB

Server: Express, Prisma, Socket IO

Features

• Login
• Register
• Private Chat
• Group Chat
• Contact
• Profile
• Search person by phone number
• Dynamic Theme (dark | light) mode
• Dynamic Walpapper Chat (custom color available)
• Realtime Chat
• Realtime multiple listen indicator when user typing
• Realtime notify when user invited group

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

• BASE_URL_API
• NEXT_PUBLIC_KEY_COOKIES_LOGIN
• NEXT_PUBLIC_KEY_COOKIES_USER

Installation

Install application with NPM

  npm i
  npm run dev

Screenshots

Login

Register

Chat List

Chat Detail

Drawer Chat

Dynamic Theme (Light | Dark) mode

Dynamic Walpapper Chat

Demo

Di bawah ini merupakan demo implementasi percakapan secara privat & group dengan tema Mencari Takjil

Demo.Para.Pencari.Takjil.mp4

Roadmap

• Indicator message is delivered, read, error
• Total unread message
• Send Media (File, Image, Video, Voice Chat)
• Pin Chat
• Archive Chat
• Displays past date time information like : Yesterday, 1 Week Ago etc...
• Send Emoji
• Story

License

MIT

Related

Here are some related projects

• Cloning Whatsapp Web API

Support

For support, email [e-mail]

Authors

• @zgramming