Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thealoneprogrammer/whatsapp-clone

Whatsapp Clone is a progressive web application that clones the WhatsApp web, which is created for one-to-one messaging using VueJs, Vuex and TypeScript, and Cloud Firestore.
https://github.com/thealoneprogrammer/whatsapp-clone

chat-application firebase firestore one-to-one-chat real-time real-time-chat vuejs vuetify vuex whatsapp whatsapp-chat whatsapp-clone whatsapp-web whatsapp-web-clone

Last synced: 2 months ago
JSON representation

Whatsapp Clone is a progressive web application that clones the WhatsApp web, which is created for one-to-one messaging using VueJs, Vuex and TypeScript, and Cloud Firestore.

Awesome Lists containing this project

README

        

Whatsapp Clone is a progressive web application that clones the whatsapp web, which is created for one-to-one messaging using VueJs, Vuex and TypeScript and Cloud Firestore.

## [Demo](https://whatsgram-1dc4e.web.app/)

# Features!

- google auth SSO
- One-to-One realtime messaging with emoji chat
- Logging Out

### Tech

Whatsapp Web Clone uses a number of open source projects and other services to work properly:

* [VueJs](https://github.com/vuejs/vue) - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
* [Vuex](https://github.com/vuejs/vuex) - Centralized State Management for Vue.js.
* [TypeScript](https://github.com/microsoft/TypeScript) - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
* [Vuetify](https://github.com/vuetifyjs/vuetify) - Material Component Framework for Vue
* [Cloud Firestore](https://firebase.google.com/) - Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps - at global scale.

### Installation

Install the dependencies and devDependencies and start the server.

Clone this repository
## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Development

Verify the deployment by navigating to your server address in your preferred browser.

```sh
127.0.0.1:8000
```

### Screenshots

![login](https://user-images.githubusercontent.com/38497682/99902368-634b2700-2ce3-11eb-85da-2def830354ba.png)
![chat-list](https://user-images.githubusercontent.com/38497682/99902371-67774480-2ce3-11eb-9ea5-1a0641f77e4d.png)
![chat](https://user-images.githubusercontent.com/38497682/99902374-69d99e80-2ce3-11eb-8421-ad8826a424c0.png)
![Desktop-1606043991184](https://user-images.githubusercontent.com/38497682/99902502-50852200-2ce4-11eb-868f-35e76ad1bdc1.gif)

### Todos

- Enable group Chat
- Add Dark Mode
- Many more...