https://github.com/john-weeks-dev/whatsapp-clone

This is a WhatsApp Clone made with Vite, Vue 3, Tailwind CSS, Node JS, Pinia, and Firebase
https://github.com/john-weeks-dev/whatsapp-clone

chat-application firebase firestore google-cloud javascript nodejs real-time-chat real-time-chat-app tailwind tailwindcss vite vitejs vitevue vue vue3 whatsapp whatsapp-clone

Last synced: 12 months ago
JSON representation

This is a WhatsApp Clone made with Vite, Vue 3, Tailwind CSS, Node JS, Pinia, and Firebase

• Host: GitHub
• URL: https://github.com/john-weeks-dev/whatsapp-clone
• Owner: John-Weeks-Dev
• Created: 2022-12-23T18:18:05.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-12-26T10:15:01.000Z (about 3 years ago)
• Last Synced: 2025-03-24T04:12:38.197Z (12 months ago)
• Topics: chat-application, firebase, firestore, google-cloud, javascript, nodejs, real-time-chat, real-time-chat-app, tailwind, tailwindcss, vite, vitejs, vitevue, vue, vue3, whatsapp, whatsapp-clone
• Language: Vue
• Homepage: https://youtube.com/watch?v=E-cg6Bqaxm0
• Size: 1.12 MB
• Stars: 37
• Watchers: 2
• Forks: 18
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# WhatsApp Clone (whatsapp-clone)

### Tutorial series on how to build this

If you'd like a step by step guide on how to build this just **CLICK THE IMAGE BELOW**

[![GO TO JOHN WEEKS DEV TUTORIAL VIDEOS](https://user-images.githubusercontent.com/108229029/209514041-d338518c-0317-4d18-81d4-bbb36192be1e.jpeg)](https://www.youtube.com/watch?v=E-cg6Bqaxm0)

Come and check out my YOUTUBE channel for lots more tutorials -> https://www.youtube.com/@johnweeksdev

**LIKE**, **SUBSCRIBE**, and **SMASH THE NOTIFICATION BELL**!!!

## App Setup

Clone the repository

```

git clone https://github.com/John-Weeks-Dev/whatsapp-clone.git

```

Now go to https://console.cloud.google.com/

Generate an API KEY.

Add your new API KEY to the script inside **src/main.js**

![Screenshot 2022-12-19 at 14 33 10](https://user-images.githubusercontent.com/108229029/208371968-8a66bbed-d157-4ab3-927f-cc573e6f9aaf.png)

And **backend/index.js**

![Screenshot 2022-12-19 at 14 33 32](https://user-images.githubusercontent.com/108229029/208372044-a867263c-b3aa-4575-ba44-8caa8f2ba8ba.png)

Setup Firebase (firestore)

Add the details to **src/firebase-init.js**

Now run this command to start the project 

```

npm i

npm run serve

```

And to start the backend

```

cd backend

npm i

npm run watch

```

You should be good to go!

# Application Images