Angular 9 Firebase Project Course
The Angular Firebase PWA Course will teach you how to build a complex progressive web app with Angular 9 (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.
More
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.
Watch Online Angular 9 Firebase Project Course
# | Title | Duration |
---|---|---|
1 | Angular Tutorial for Beginners | 20:46 |
2 | Resources | 01:51 |
3 | CLI | 04:02 |
4 | Anatomy | 05:13 |
5 | Components | 13:52 |
6 | Component Composition | 05:19 |
7 | Dependency Injection and Services | 03:19 |
8 | Modules | 02:41 |
9 | App Overview | 02:50 |
10 | Meet Angular Material | 05:22 |
11 | Schematics | 01:10 |
12 | Shared Module | 03:59 |
13 | App Navigation Shell | 08:45 |
14 | Routing | 02:57 |
15 | Firebase Setup | 02:43 |
16 | Lazy Loaded Login Feature | 03:54 |
17 | Google SignIn | 04:38 |
18 | Email Password Auth | 11:33 |
19 | Auth Guard | 04:59 |
20 | Kanban Module | 02:10 |
21 | Firestore Data Model | 04:49 |
22 | Database Service | 07:39 |
23 | CDK Drag and Drop | 06:36 |
24 | Drag and Drop Animation | 03:07 |
25 | Dialogs | 08:04 |
26 | Delete Button | 03:11 |
27 | Server-side Rendering - What? Why? How? | 02:57 |
28 | SEO Service | 05:33 |
29 | Angular Universal with NestJS | 02:56 |
30 | Prerendering | 04:05 |
31 | Angular Universal on Google Cloud Run | 05:56 |