Firestore Chat

This chat application is based on Firestore service of Google Firebase.

Feature List

1. Realtime Chat with google firestore database
2. One 2 One chat
3. Group Chat
4. Unread message count
5. Vuex Integration

Technology

1. Vue Js 2
2. Vuex
3. Firebase Firestore Database

Firebase Account setup:

• Below steps are based on google's firebase console UI at the time of this project development. If google's UI changes, then please see their docs to configure the firebase App in firebase console.

1. Go to Firebase Console (https://console.firebase.google.com/)
2. Click on add project
3. Enter project name and continue
4. Turn off google analytics and click create project
5. Click continue when project is ready
6. Click on Firestore Database then create database
7. Choose start in test mode and click Next
8. Choose location and click Enable
9. You will be presented with the following screen
10. Create 3 collections with the following names: (conversations,messages,unread_records). See the screenshot below.
11. Go to project settings
12. Click on create app button
13. Enter App nickname and click register app
14. You will be presented with firebase sdk config data. Copy the firebaseConfig info for later use.

Project Setup

1. Clone this repository

git clone https://github.com/AhnafMuttaki/firestore_chat.git

2. Open terminal in project folder

3. Install required packages

npm install

3. Rename firebase config file.

1. Rename PROJECT_ROOT/src/configs/firebaseExample.js to PROJECT_ROOT/src/configs/firebase.js
2. Fill up the data of the firebase.js config file with firebaseConfig info data from firebase

4. Run app

npm run serve

5. Open two window in 2 browsers and login with mock users to test chat application