Choose Your Desired Option(s)
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?
This course is intermediate level and designed to expose you to real-world challenges when building PWAs with Angular. It assumes you have at least basic knowledge of web programming and 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.
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.
Chapters
- 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
Share Now!