Build a scalable web app with Firebase in 20 minutes

on YouTube ↗18m

" summary

A runnable Kanban board is built with Angular Material and the Angular CDK providing drag and drop and an ngFor UI, backed by Cloud Firestore collections named todo inProgress and done and synced via AngularFire valueChanges observables for real time updates. Moves use a Firestore transaction that deletes from one collection and adds to another. The app deploys to Firebase Hosting with ng add AngularFire setup and a one‑step ng deploy and demonstrates Kanban board functionality working live.

AI-written summary · about

" chapters (9)

1. 0:00Start
2. 5:27develop the layout of the application
3. 6:34set the cover of the toolbar to the primary color
4. 7:16wrap the column in a container wrapper
5. 8:38implement the drag and drop
6. 11:11wrap the container wrapper into another div
7. 12:35add the angularfire library
8. 14:56create a firestore transaction
9. 15:52deploy it to firebase hosting

" related talks

• 30mBuilding Apps with Angular and FirebaseMinko Gechev · TSConf 2020
• 45mBuilding a web application with Angular and FirebaseMark Thompson · Google I/O 2021
• 21mThe Best 20 Minute Angular & Firebase Video You’ll Ever SeeDavid East · ng-conf 2020: Hardwired
• 29mProgressive Web Apps with Angular and FirebaseErik Haddad · AngularUP 2017
• 02h 33mBuilding Modern Web Applications with FirebaseArman Murzabulatov · JavaScript fwdays’23
• 22mBuilding Angular2 & Firebase applicationFáris Ismail · Ng-Poland 2017
• 49mLet Firebase help you to build better Web appsJuarez Filho · GDG DevFest Hamburg 2017
• 28mServerless Angular, Material, Firebase and Google Cloud applicationsLoiane Groner · DevFest Florida 2019