Live group chat room made with Vue.js 3 framework along with VueUse composables/renderless components, TailwindCSS + HeadlessUI and Firebase 9 as a backend.

1. Rename .env.sample file into .env;
2. Create Cloud Firestore project (Google account required);
3. Replace const firebaseConfig contents at .src/firebase/config.js with your Firebase configuration excluding apiKey (its property should equals to firebaseApiKey);
4. Copy/paste your Firebase API key to the .env file;
5. Copy API key for a free image randomizer (limited to 50000 API calls per month) from your profile at https://api-ninjas.com/ (sign up required);
6. Add image randomizer API key to your .env file.

1. Clone the repository
2. Run npm ci to install dependencies
3. Run one of the following commands:

npm run dev

npm run build

npm run lint

npm run format

1. Irene for testing the project across numerous devices 💜
2. The Net Ninja for this repo and Tyler Potts for this video. This project was inspired by and borrowed bits and pieces from both of them;
3. Doug Stevenson for a hint on getting server Timestamp from firebase v9 in their stackoverflow reply licensed by https://creativecommons.org/licenses/by-sa/4.0/;
4. anshul for the example of using Firebase 9 auth for creating user with email and password in their post licensed by https://creativecommons.org/licenses/by-sa/4.0/;
5. Erik for the detailed guide on how to update user's profile with Firebase 9 methods in this blog entry;
6. Decade Moon for pointing out the way to use methods instead of computed when binding class with arguments in their post licensed by https://creativecommons.org/licenses/by-sa/4.0/;
7. Danny and Jason Watmore for showing the proper way of hiding API keys when deploying vite project to GitHub Pages. These pieces of advice can be found via Danny's YT video and Jason's blog entry;
8. Larainfo blog for the instruction on how to apply dark/light mode with VueUse composable and TailwindCSS in this post;
9. Felix Oduro for showing the eslint config to exclude error for Node.js module.exports feature in this post licensed by https://creativecommons.org/licenses/by-sa/4.0/;
10. storyset for the image I used in this project's social preview.

If you get interested in this project, I'd be glad to see your contributions. Pull requests are welcome!