View Live Here: chatballoons.web.app
A public real-time chat application created for Dev Jam
.
- User can login using GMail
- User can see previously sent messages
- User can type message in the
input field
- Pressing
enter
or clicking thesend
button will send the typed message - Sent messages are saved in the database
- Messages can be seen by everyone logged in
- Messages are displayed realtime
- Vue 3
- TailwindCSS
- Firebase (Firestore, Auth, Hosting)
- Vitejs
Future direction of the project:
- multiple chat rooms (public and private)
- sending of images and videos
email and password
signin
joashdev <github/joashdev>
Clone or Download Repository
# git clone
git clone https://github.com/joashdev/chat-balloons-public.git
# goto directory
cd chat-balloons-public
# install dependencies
npm i
Create
.env.local
in the root directory
# example .env.local file
VITE_FIREBASE_API_KEY=YOUR_FIREBASE_CONFIG
VITE_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_CONFIG
VITE_FIREBASE_PROJECT_ID=YOUR_FIREBASE_CONFIG
VITE_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_CONFIG
VITE_FIREBASE_MESSAGING_SENDER_ID=YOUR_FIREBASE_CONFIG
VITE_FIREBASE_APP_ID=YOUR_FIREBASE_CONFIG
VITE_FIREBASE_MEASUREMENT_ID=YOUR_FIREBASE_CONFIG
Serve Locally, Build, Deploy to Firebase
# serve locally
npm run dev
# build for production
npm run build
# deploy to Firebase
npm run deploy-live # builds the project before deployment
- web2033 <github/web2033> - starter Vue template