🍱 What will I build?
The Angular Firebase PWA Course will teach you how to build a complex progressive web app with Angular 12 (ivy), Material Design, and Firebase. It starts from absolute basics and eventually culminates with the deployment of a server-rendered PWA on Google Cloud Run.
You will build a full-stack Kanban (看板) storyboard app inspired by Trello. Authenticated users can create, sort, update, and delete boards with all interaction persisted in Firestore.
💡 What will I Learn?
- Code organization with feature modules
- Lazy-loaded routing
- Usage of common Angular Material components
- User authentication with Firebase (Google OAuth, Email/Password)
- Reactive Forms vs Template-driven Forms
- Drag-and-Drop with the Angular CDK
- Data modeling and complex writes/queries with Firestore
- Firestore security rules
- Angular Universal with Nest.js
- Prerendering and/or deployment to Google Cloud Run
🤔 Is this Course Right for Me?
Is this Course Updated?
The last code review and update was completed on Sep 2nd, 2022 using Angular version
12.0. The course receives regular updates, especially to address breaking changes in Angular and/or Firebase.
🏎️ Test Drive
Visit the Firestarter demo app and install it as a PWA to give it a test drive before you enroll.
- Angular Beginner Project - Build a Tic-Tac-Toe game with Angular
- Resources - Source code and course resources
- CLI - Introduction to the Angular CLI
- Anatomy - The purpose of every file in Angular
- Components - An introduction to Components, Directives, and Pipes
- Dependency Injection - Use dependency injection (DI) to create services
- Modules - How NgModules help manage code and complexity
- App Overview - Overview of the organization and architecture of the Firestarter demo app.
- Meet Angular Material - Introduction to Angular Material and design systems
- Schematics - Using Angular Material Schematics
- Shared Module - Share component and Material Modules efficiently throughout the app
- App Navigation Shell - Add a responsive navigation shell to the app
- Routing - Create a home page configured with the Angular Router.
- Firebase Setup - Add Firebase and @angular/fire to your app
- Lazy Loaded Login Feature - Configure the router for lazy-loaded user module, aka code splitting.
- Google SignIn - Create a directive that extends Google SignIn to any button or element
- Email Password Auth - SignUp, SignIn, and reset a password with Reactive Forms
- Auth Guard - Protect routes with guards.
- Kanban Module - Kanban feature module setup
- Firestore Data Model - Firestore database model for kanban boards and backend security rules.
- Database Service - Create a specialized Firestore database service for Kanban boards
- CDK Drag and Drop - Add drag and drop capabilities to a Material Card
- Drag and Drop Animation - Animate the CDK Drag and Drop events with CSS transitions
- Dialogs - Create, update, delete data from a Material Dialog modal popup
- Delete Button - Create a confirmable delete button
- Server-side Rendering - What? Why? How? - Key concepts related to SSR and Angular Universal
- SEO Service - Create a service for Open Graph & Twitter meta tags.
- Angular Universal with NestJS - Add server-side rendering to Angular with Nest.js
- Prerendering - Prerender with Angular Universal using a vanilla JS script
- Angular Universal on Google Cloud Run - Deploy to Angular Universal to Google Cloud Run and connect it to Firebase Hosting