WAZONE - Web

This project was created to fulfill the job acceptance test at KreatifIndo
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
   • Challenges
   • Feature To Implement In The Future
2. Getting Started
   • Prerequisites
   • Installation
3. Features
4. Contact

About The Project

Goal

Build Web App to consume/visualize this API/Service:

• Use all the API Endpoint
• Show received WhatsApp message
• Send received WhatsApp message
• Get WhatsApp contacts
• Able to login Multi Device

(back to top)

Built With

• 
• 
• 
• 

(back to top)

Challenges

• I'am imitating WhatsApp Desktop layout so the UX feel familiar.
• Receiving new message to feel it like realtime quiet tricky without socket. I'am using recursive function to fetch data repeatedly and using Promise setTimeout for delaying the function.

(back to top)

Feature To Implement In The Future

• Implement socket for realtime update.
• Implement API Key using JWT to identify botId (currently using x-bot-id on headers.
• Notification/toast for new message received.
• Implement push message for notification while tab/browser not focused.

(back to top)

Getting Started

Step or instructions on setting up the project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

• Node 16^

Installation

1. Clone the repo

   git clone https://github.com/kim-dev-git/WAZone-Web.git

2. Open the project folder

   cd WAZone-Web

3. Install NPM packages

   npm install

4. For the .env file you can create or copy it from.env.example

   VITE_HEADER_KEY=x-bot-id

5. Run project

   npm run dev

(back to top)

Features

Create custom bot name

Scan QR and Multi Device Login

List Contacts & Chats

Send & Receive Messages

(back to top)

Contact

Kiki Irwan Maulana - [email protected]

Project Link: https://github.com/kim-dev-git/WAZone-Web

(back to top)