Simple Chat App

This is a personal project of mine called Eazy Chat App. It is basically for users to add contact using email and chat with them online similar like other chat apps.

Technologies used

• Vue 3
• TypeScript
• Vite
• TailwindCSS
• Firebase
• Bootstrap Icons
• Pinia
• Vue-router
• Headlessui/vue
• Eslint-plugin-vue

Features

• Email Login
• Register
• Request new password
• Delete Account
• Send message to other user
• Add user contact
• Create, update & delete user profile
• Upload profile image

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and preview
$ npm run build
$ npm run serve

Deployment

Make sure to create a .redirects file in the public folder with the follow content

/*  /index.html  200

Demo

https://user-images.githubusercontent.com/83596481/155500569-e071ec91-9ccf-4a4f-af02-4626a7635307.mp4

Resources & References

• Structure Firestore (Firebase) For Scalable Chat App
• Vue, guard routes with Firebase Authentication
• Keep overflow div scrolled to bottom unless user scrolls up
• Redirects and rewrites in Netlify
• How to check if two arrays has same elements