https://github.com/zgramming/cloning-whatsapp-web

Cloning Whatsapp Web Version
https://github.com/zgramming/cloning-whatsapp-web

eslint mantine nextjs redux-toolkit socketio-client tailwindcss typescript

Last synced: about 1 year ago
JSON representation

Cloning Whatsapp Web Version

• Host: GitHub
• URL: https://github.com/zgramming/cloning-whatsapp-web
• Owner: zgramming
• License: mit
• Created: 2023-04-01T09:20:17.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-16T08:16:16.000Z (about 2 years ago)
• Last Synced: 2025-03-25T09:47:45.862Z (about 1 year ago)
• Topics: eslint, mantine, nextjs, redux-toolkit, socketio-client, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://cloning-whatsapp-web.vercel.app
• Size: 2.19 MB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![Logo](github/background.jpg)

# Cloning Whatsapp Web

![3](https://user-images.githubusercontent.com/38829404/231115894-c27b05ce-7efe-43b0-af5a-e00c5a1fdda8.png)

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

- [x] Login

- [x] Register

- [x] Private Chat

- [x] Group Chat

- [x] Contact

- [x] Profile

- [x] Search person by phone number

- [x] Dynamic Theme (dark | light) mode

- [x] Dynamic Walpapper Chat (custom color available)

- [x] Realtime Chat

- [x] Realtime multiple listen indicator when user typing

- [x] 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

```bash

  npm i

  npm run dev

```

## Screenshots

#### Login

![Login](github/screenshots/1.%20login.png)

#### Register

![Login](github/screenshots/2.%20register.png)

#### Chat List

![Login](github/screenshots/3.chat%20list.png)

#### Chat Detail

![Login](github/screenshots/4.%20chat%20detail.png)

#### Drawer Chat

![Login](github/screenshots/5.%20Drawer%20Chat.png)

### Dynamic Theme (Light | Dark) mode

![2  setting - theme](https://user-images.githubusercontent.com/38829404/231118752-83e3b01f-6b6d-4032-a9f4-1458b842913e.gif)

### Dynamic Walpapper Chat

![1  setting - chat walpapper](https://user-images.githubusercontent.com/38829404/231118814-9e9d065a-dacb-4cf9-b60d-7212a65e8fd8.gif)

## Demo

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

https://user-images.githubusercontent.com/38829404/230758792-a0baea0b-18e7-4044-92fb-887776d5839f.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](https://choosealicense.com/licenses/mit/)

## Related

Here are some related projects

- [Cloning Whatsapp Web API](https://github.com/zgramming/Cloning-Whatsapp-Web-API)

## Support

For support, email zeffry.reynando@gmail.com

## Authors

- [@zgramming](https://github.com/zgramming)