Firebase In Depth

Explore building the home component with angular fire, displaying two course lists by beginner and advanced categories, using a dedicated courses service and observables via the async pipe.

Load two course lists in the home component by category using an array-contains query on categories, order by sequential number, and map Firestore snapshots to courses and lessons.

Convert Firestore query results into domain models by mapping document snapshots to objects with id and data, using a generic convert snaps utility for type safety and reuse.

Explore the Firebase local emulator to develop and test apps locally, avoiding cloud databases. Set up a Firebase project with the CLI and test Firestore, security rules, functions, and authentication.

Log in with the Firebase CLI and initialize a project, enabling Firestore, Cloud Functions, hosting, storage, and the local emulators. Configure ports and connect the client to the emulator suite.

Set up and run the Firebase local emulator for Angular development. Connect to a Firestore, authentication, and cloud functions, toggle using emulator flag, and manage data with export and import.

Explore how to implement the create operation in a full AngularFire CRUD app by building a reactive create course form with validation, routing, and Firestore timestamp handling.

Learn to implement the create operation in AngularFire for a course, using a partial course and optional client- or server-generated IDs, with navigation on success and alert on error.

Implement a create course flow in AngularFire that finds the highest sequential number, assigns the next, and saves via document set or collection add, returning the inserted course.

Implement the update operation for a course in firestore using angularfire, applying changes through a partial course object via the edit course dialog and service API.

Implement the edit course dialog for updating a course with Angular Material and reactive forms, preloading fields from the selected course and refreshing the list after closing.

Finish the AngularFire crud update by saving form changes with the update course api, subscribing to the observable, and closing the dialog to refresh the courses from the database.

Implement the delete course CRUD in AngularFire using the Firestore doc API and RxJS from factory function, wire a delete button to remove a course and refresh the list.

Learn in Firebase in depth how Firestore batched writes enable atomic deletes of a course and its nested lessons using AngularFire, reading lessons and deleting them in a single batch.

Design a course page that displays course details and a paginated lessons list. Pre-fetch data with a router resolver to load the course from Firestore before the page renders.

Implement the course screen with a resolver that fetches a course by URL from Firestore, returning a course or null, and render the title and thumbnail from the resolved data.

Implement a Firestore paginated query to fetch course lessons, via the angular courses service, using page size, start after, and order by direction to return a page of lessons.

Implement and demo pagination for course lessons in Angular using Firestore backend, loading pages with a load more button, showing a spinner, and appending pages with finalize-based loading state.

Enable Firebase authentication with email and password and Google sign-in to secure user access. Use the Firebase emulator to test with test users, including administrators and normal users.

Implement a login screen using Firebase UI with email/password and Google sign-in. Return a JWT with user identity and roles, and redirect to the home page after successful sign-in.

Implement an Angular user service that exposes is logged in and picture observables from Firebase authentication via AngularFire, enabling the UI to adapt to login/logout states and display profile picture.

Derive is logged in, is logged out, and picture observables from AngularFire to show or hide login, logout, and avatar ui elements, and implement a logout flow with routing.

Learn how Firestore security rules decide if read or write requests go through, using declarative, path-based checks to secure a Firebase app from the client, demonstrated with the emulator.

Learn to write Firestore security rules from scratch, making courses read-only and lessons private, using nested match blocks and path variables to control access.

Explore Firestore security rules fundamentals, including rule order, handling conflicting outcomes, and the separate types for read and write operations, with get, list, create, update, and delete.

Implement Firestore security rules to restrict courses and lessons to authenticated users, using a json web token, uid checks, and custom claims, with a reusable isAuthenticated function.

enforce data validity in a schemaless Firestore database with security rules, validating fields like the sequential number and a non empty url using a reusable is valid course function.

Implement a Firestore security rules whitelist by verifying authenticated users against a dedicated users collection using exists, ensuring only whitelisted users can read data.

Implement role based access control using custom claims in Firebase authentication to restrict Firestore writes to administrators while enabling reads for non-admin users.

Learn how to write security rules for collection group queries in Firestore, using a wildcard path to target nested lessons and grant read access only to known users.

Implement a frontend rbac by exposing a roles observable from the user service, deriving roles from the id token claims to conditionally render ui, with backend security via Firestore rules.

Implement role-based access by hiding admin-only buttons in course cards and home views with a user service, roles observable, and ng if, exposing add, edit, and delete to administrators.

Learn to protect admin screens using the AngularFire authentication guard, canActivate, and guard pipes to redirect unauthorized users to login and enforce admin claims.

Upload files securely to Firebase storage in a serverless app, enforce authentication rules, and implement a thumbnail upload flow with safe download URLs.

Finish implementing file uploads to firebase storage using angularfire, organizing files under courses/{courseId}, and validating with production users outside the emulator, with progress indicators and security rules to come.

Implement a file upload progress indicator in an Angular component using a material progress bar in determinate mode, fed by AngularFire's percentage changes observable to show real-time upload progress.

Wait for the upload to finish, create a safe download URL from Firebase Storage, and display the image thumbnail to the user. Implement error handling and authentication-based security rules.

Learn to write and deploy firebase storage security rules, targeting folders and files, enforce authentication and a five‑megabyte file size limit, and test rules in the console and emulator.

Learn how Firebase cloud functions run backend code in response to events, scale to zero, and trigger via Firestore changes, file uploads, or http requests.

Create a hello world Firebase cloud function, run locally with the Firebase emulator, configure timeout and memory, and explore http endpoints, logs, and triggers.

Explore database triggers in Firebase Cloud Functions, learn to respond to Firestore on create events, and test and log triggers while preparing for transactional updates.

Initialize a Firestore connection in a Firebase cloud function using the admin SDK, then implement a transactional trigger that increments a stats/promotional counter when a new promoted course is added.

Explore implementing a Firestore cloud function trigger for new course documents, using a transaction to atomically increment the promo counter in the courses stats document, with local testing.

Minimize cold startup time for firebase cloud functions by moving triggers to external files and dynamically importing them in index.ts, reducing unnecessary imports and bootstrapping latency.

Develop Firebase Cloud Functions update triggers using the change object to compare before and after course data and update the promo counter.

Implement a Firebase delete trigger in a cloud function to decrement the promotion counter in the courses stats document when a course is deleted.

Learn to create a Firebase cloud function rest endpoint with Express, implement a post endpoint to create users, and test via emulator and frontend environment url.

Implement a front-end call to a Firebase cloud function REST endpoint using Angular's HttpClient, sending email, password, and admin flag, and handle responses and errors.

Implement the create user endpoint by creating a Firebase authentication user, setting admin custom claims, and whitelisting the user in Firestore. Secure the endpoint for authenticated admin access.

Attach the firebase id token to http requests with an angular http interceptor, exposing it via an authentication token service. Backend validates token and admin claims, returning 403 when unauthorized.

Implement an express middleware to extract user credentials from the authorization header, verify the json web token, and enforce administrator access for the create user endpoint.

Conduct an end-to-end test of the secure create user endpoint, verify JWT authorization, admin role propagation, and guard-enforced access, culminating in production deployment readiness.

Deploy to production by creating a firebase service account and an initial admin user. Use a node script with the service account to set custom claims and grant admin privileges.

Write and run a local node script using the Firebase admin package to initialize a database connection with a service account and set a user’s custom claims to administrator.

Configure a production environment from development settings, build in production mode, and deploy with Firebase hosting and cloud functions after upgrading to Blaze pay-as-you-go.

Test the production deployment of your Firebase app by validating admin and student access and Firestore security rules. Confirm CRUD operations and admin features like create, edit, and delete courses.

Learn to build a mostly serverless Firebase app with Firestore security rules and Firebase authentication, enabling transactional frontend CRUD and role-based access via Json web token.