https://github.com/azmanabdlh/whatsapp-html-clone

https://github.com/azmanabdlh/whatsapp-html-clone

bun html5 javascript typescript webpack websocket

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/azmanabdlh/whatsapp-html-clone
• Owner: azmanabdlh
• Created: 2024-06-08T04:50:36.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-12T07:41:00.000Z (5 months ago)
• Last Synced: 2024-06-12T16:47:46.106Z (5 months ago)
• Topics: bun, html5, javascript, typescript, webpack, websocket
• Language: TypeScript
• Homepage:
• Size: 425 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![demo](./demo.png)

## Overview

Simple WhatsApp clone using: Websocket | HTML | CSS | Typescript

> The project was created for learning purposes

## Flow

### Connection

![on connection](./on-connection.png)

### Messaging

![on message](./on-message.png)

## Install

* [Local](#local)

* [Docker](#docker)

### Local

1. Prerequisite project

    * Download [NodeJS](https://nodejs.org/en) and then install NodeJS installer

    * Download [Git](https://www.git-scm.com/) and then install installer

2. Download project via Git

```bash

git clone https://github.com/azmanabdlh/whatsapp-html-clone.git

```

3. Another option you can download manual this project via github.com.

4. Open code editor `Visual Studio Code`, add project with drag and drop on code editor.

5. Running the command

```bash

// install dependencies

1. make dep 

// compile script

2. make compile

// or using live compile

3. make serve-compile

```

4. Open your browser (Chrome) and drag and drop index.html in  `/packages/browser/public` . But when using `serve-compile`, open `localhost:9191`.

5. Client done

6. Running server

```bash

make serve-websocket

```

7. Open browser and open `localhost:8181`

8. Server done

### Docker

1. Please install [Docker](https://www.docker.com/). then install the Docker Installer

3. Running the command to build app

```bash

make compose

```

4. Open browser and open link

```bash

localhost:80 -> client

localhost:8181 -> server

```

5. Done