Quasar 2 & Firebase Cloud Firestore (with Vue 3 & Pinia)

Explore Google's Firebase as an all-in-one backend for apps, covering authentication, Cloud Firestore, real-time database, Cloud Functions, messaging, hosting, storage, and pricing.

Create a Firebase project to store, display, and manage user entries with authentication and secure database rules, guiding you from signing in to the Firebase console to naming your project.

Create a web app, install firebase, initialize the app with your project config in a firebase.js file, and prepare to set up a Firebase database.

Set up a Firestore database in the Firebase console, starting in test mode. Create an entries collection with documents and fields id, name, amount, paid, connect Moneyballs to display them.

Connect your app to a cloud Firestore database using the web modular API by importing get Firestore, creating a db constant, exporting it, and using it in the entries store.

Display entries from Cloud Firestore and enable adding, deleting, and updating them. Initialize the store by loading entries from Firebase and remove local storage usage.

Trigger the load entries action on app start, fetch all documents from the Firestore entries collection, and push each document's data into the entries array to display on the page.

Enable real-time updates by using Firebase onSnapshot to listen to the entries collection, reflecting added, edited, and deleted documents instantly in the app.

Add a loading screen by delaying entries load, hiding the no entries widget until data arrives, and displaying a centered quasar spinner while Firestore data loads.

Add entry action creates a new entry with id and default paid flag, writes it to the Firestore entries collection with setDoc, and updates the list via on snapshot listener.

Discover how to optimize Firestore entries by using addDoc to let Firebase generate IDs, remove ID fields, and attach doc.id as entry.id for delete and update actions.

Learn to delete an entry by removing its Firestore document with the doc and deleteDoc methods, replacing local array splicing, and confirming the deletion updates both Firestore and the UI.

Editing a rent entry by id using an updates object to update only the specified fields like name, amount, or paid status via Firestore update doc.

Order entries in a Quasar 2 app by adding an order field, building a getter to sort by order, and displaying the correctly ordered list with Vue 3 and Pinia.

Add an order property and paid flag when creating a new entry, and implement generateOrderNumber using Math.max on the order numbers gathered from entries.

Set the first entry's order to 1 and use Math.max to assign subsequent order numbers.

Update order numbers after drag-and-drop reordering to keep local state and Firebase Firestore in sync, displaying order numbers beside each entry and updating Firestore accordingly.

Develop user authentication by creating an empty auth layout, an auth page with email and password, and a /auth route to register or log in for managing user entries.

Add a centered auth card with an email and password form and a submit button, styled with a primary background and white text, and reuse a toolbar title component.

Add tabs for login and register using Quasar cue tabs, copy the cue tabs component, configure a tab set ref, set labels login and register, and default to login.

Check the login form in dark mode and apply a light-or-dark composable to switch input backgrounds and text between light and dark themes, ensuring readability on the auth page.

Implement a dynamic submit button that toggles between login and register as users switch tabs, using a Vue 3 computed property and a ternary to set the label.

Create a reactive credentials object to store email and password, bind them to the form inputs, and connect view model references in the imports, ensuring fields reset after hookup.

Implement form submission by wiring a submit event, converting the button to type submit, and creating a formSubmit function that logs 'form submitted' when email and password are entered.

Demonstrate basic form validation for email and password, and display a Quasar dialog when fields are missing, providing immediate user feedback on login input.

Implement form submit success to handle login and register flows in a Vue 3 app, using a tab value to distinguish authentication paths and log the credentials object.

Redirect the user back to the entries page after a submission by using the vue router composable and pushing the root path; enable the auth page for login or register.

Enable Firestore authentication for user registration, login, logout, and personal data access. Wire the Firebase auth module to a new Pinia auth store and implement email/password sign-in.

Register a user with email and password using Firebase, wired to a Pinia auth store in a Vue 3 and Quasar 2 app, with error dialogs and automatic login.

Implement logout by importing Firebase auth signOut, adding a logout user action in the auth store, and wiring the navigation logout button to log out or show an error dialog.

Learn how to implement user login with email and password in a Vue 3 + Pinia app, including an auth store action, error handling, and reusable Firebase dialogs.

Listen for auth changes with onAuthStateChanged, initialize the auth store, and fetch the current user's Firestore entries stored in their own collection.

Store the logged in user's email and id in a reactive auth store and reset them on logout, using a default object and object.assign for maintainability.

Improve the logout button in a Quasar 2 app by displaying the currently logged-in user's email from the auth store in the navigation drawer, using a v-if guard.

Learn to manage auth changes by redirecting users through the auth store, using the use router composable to push to entries on login and replace to auth on logout.

Restructure the Firestore database to support multiple users by adding a root users collection with documents keyed by each user’s ID, and a sub collection entries for that user.

Set up dynamic Firestore references per user by initializing an entries collection ref with the logged-in user's unique id, then load that user's entries.

Unsubscribe the on snapshot listener on user logout to prevent cross-user data visibility in a Firestore-backed Vue 3 app using Quasar 2 and Pinia.

Learn to secure a Quasar app with global navigation guards using a beforeEach hook, boot files, and router auth logic to restrict access based on login status.

Implement navigation guard restrictions by checking the auth store's user id to block unauthenticated access and redirect to /auth, while keeping authenticated users on their current page.

Smooths returning-user experience by preventing a brief auth page flash on load. Implement an auth initialized flag that delays redirects until the auth state change completes.

Learn to secure a Firestore database by implementing Firebase security rules that restrict reads and writes to each authenticated user's notes, preventing cross-user access.

Add Firebase security rules to restrict access to users/{userId} by comparing request.auth.uid to the path userId, ensuring users can only read or write their own data.

Build a production web app with Quasar, deploy the dist spa to a subdomain, and verify login, add/edit/delete/reorder entries across web and other platforms.

Troubleshoot and fix a Capacitor on iOS Firebase Auth issue by manually initializing Firebase Auth with Capacitor, enabling IndexedDB persistence, and verifying login and data operations in an iOS simulator.

The Android lecture shows fixing jitter when reordering Firestore entries by pausing the snapshot listener during updates. Use Promise.all with async updates to reload entries and reduce spinner glitches.

Build and test the mac version of Moneyballs, run npm run build:mac, launch the electron app, and perform login, add/edit/delete, mark paid, sort, and reorder entries.

Build and test the Moneyball Windows app, delete the electron folder, and run it in a Windows emulator; log in, add and edit gym entries, mark paid, and sort them.