🎤 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?
This course is intermediate level and designed to expose you to useful patterns when building realtime web apps with Vue and Firebase. It assumes you have at least basic knowledge of web programming, including basic skills in JavaScript, HTML, and CSS. It is fast-paced and similar to my style on YouTube, but far more in-depth and comprehensive.
Chapters
- 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.