🎤 What will I build?
The Vue Firebase Project Course will teach you the basics of full-stack web development by building a chat prototype from scratch.
You will build a realtime 💬 walkie-talkie style chat app with the ability to record and upload audio from the device - inspired by the popular Voxer mobile app.
💡 What will I Learn?
In this course you will learn…
- Fundamentals of of Vue components and reactivity
- Dynamic Vue routing
- User authentication with Firebase (Anonymous, Email/Password)
- Usage of the Vuefire Package
- Vue Composition API
- Chat Features in Firestore
- Record audio on the web
- Upload files to Firebase Storage
🤔 Is this Course Right for Me?
- Resources - Project source code and Vue Firebase resources
- Vue Setup - Get started with the Vue CLI
- Firebase Setup - Install Firebase and the Vuefire package
- Your First Component - Build a basic home page component with routing
- Anonymous Auth - Basic user authentication with Firebase
- Realtime Auth State - React to changes to the Firebase User Auth State
- User Profile - Create a user profile where the user can sign out
- Email Password Authentication - Bind to forms in Vue to sign up with email & password
- Create Chat Rooms - Create a chat room in Firestore linked to the current user
- Query Chat Rooms - Query all chat rooms owned by the current user
- Dynamic Routing - Load a chat room based on its document ID with the Vue Router
- Query Messages - Query most recent messages in a subcollection of the chat room
- Message UI - Build a UI component for showing the message text
- Capture Audio - Record a stream from the user's microphone using the MediaRecorder API
- Upload - Upload the audio file to Firebase Storage and link it to a Firestore document
- Wrap up - Final thoughts and ideas to improve the quality of the app.