The Angular Firebase Project Course - Fireship

🍱 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

1. Angular Beginner Project - Build a Tic-Tac-Toe game with Angular
2. Resources - Source code and course resources
3. CLI - Introduction to the Angular CLI
4. Anatomy - The purpose of every file in Angular
5. Components - An introduction to Components, Directives, and Pipes
6. Dependency Injection - Use dependency injection (DI) to create services
7. Modules - How NgModules help manage code and complexity
8. App Overview - Overview of the organization and architecture of the Firestarter demo app.
9. Meet Angular Material - Introduction to Angular Material and design systems
10. Schematics - Using Angular Material Schematics
11. Shared Module - Share component and Material Modules efficiently throughout the app
12. App Navigation Shell - Add a responsive navigation shell to the app
13. Routing - Create a home page configured with the Angular Router.
14. Firebase Setup - Add Firebase and @angular/fire to your app
15. Lazy Loaded Login Feature - Configure the router for lazy-loaded user module, aka code splitting.
16. Google SignIn - Create a directive that extends Google SignIn to any button or element
17. Email Password Auth - SignUp, SignIn, and reset a password with Reactive Forms
18. Auth Guard - Protect routes with guards.
19. Kanban Module - Kanban feature module setup
20. Firestore Data Model - Firestore database model for kanban boards and backend security rules.
21. Database Service - Create a specialized Firestore database service for Kanban boards
22. CDK Drag and Drop - Add drag and drop capabilities to a Material Card
23. Drag and Drop Animation - Animate the CDK Drag and Drop events with CSS transitions
24. Dialogs - Create, update, delete data from a Material Dialog modal popup
25. Delete Button - Create a confirmable delete button
26. Server-side Rendering - What? Why? How? - Key concepts related to SSR and Angular Universal
27. SEO Service - Create a service for Open Graph & Twitter meta tags.
28. Angular Universal with NestJS - Add server-side rendering to Angular with Nest.js
29. Prerendering - Prerender with Angular Universal using a vanilla JS script
30. Angular Universal on Google Cloud Run - Deploy to Angular Universal to Google Cloud Run and connect it to Firebase Hosting