The Angular Firebase Project Course

Build a high-performance PWA with Angular and Firebase from scratch.

Taught by Jeff Delaney That guy from the Fireship YouTube channel

Tech Stack

🍱 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.

Firestarter Live Demo

💡 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.

You have full access to this course 🎉

How to Enroll

Lifetime access for a blazingly low price

OR

Unlock all Fireship content && bonus perks

Chapters

01 Angular Beginner Project

Build a Tic-Tac-Toe game with Angular

02 Resources

Source code and course resources

03 CLI

Introduction to the Angular CLI

04 Anatomy

The purpose of every file in Angular

05 Components

An introduction to Components, Directives, and Pipes

06 Dependency Injection

Use dependency injection (DI) to create services

07 Modules

How NgModules help manage code and complexity

08 App Overview

Overview of the organization and architecture of the Firestarter demo app.

09 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