Project - Vue Chatroom Demo

There are so many ways to build websites nowadays — JavaScript libraries and frameworks like React, Next, Angular, Vue, Nuxt, and so on. Although it takes a lot of time to learn each different tool, sometimes the more you try things you’re not familiar with, the more you understand the strengths and weaknesses of each tool. This time, I built a chatroom demo using Vue to help myself get familiar with how Vue works.

First impression about Vue.js

First of all, when I am coding with React or Next, I feel like I’m constantly writing JavaScript, and I am used to embedding logic directly in JSX using JavaScript expressions and ternary operators.

But when I am coding with Vue, I feel like I’m writing HTML, and it feels quite strange to add JavaScript variables into Vue’s directives.

Another major difference for me is Vue’s reactivity system which is built-in and more automatic. State changes update the view without manual intervention. When I am using React, I am used to using hooks like useState, setState to update the changes.

Firebase

This project mainly uses Firebase to handle various tasks, including using Firestore Database to store data, utilizing Firestore’s functions like collections, onSnapshot, and addDoc to fetch and write data, as well as using Firebase services to manage authentication and hosting.