I Let Strangers Design My Slides using NgRx Component Store
summary
Built an Angular drawing app that sends prompts to Mechanical Turk and collects illustrations, using the Canvas API to capture drawings and uploading image blobs to Firebase Storage (with Firebase Functions coordinating). State and effects live in NgRx Component Store: local per-easel store instances, selectors for brush/color, an effect like connectCanvas to wire mouse events without manual subscribe, and an onSave effect that produces blobs emitted to an output. The crowdsourced slides actually render and save, so the system works end to end.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 0:54Strangers illustrate slides
- 2:17Angular app with Mechanical Turk
- 3:40NgRx Component Store
- 7:11Component Store state setup
- 9:57Sharing state across components
- 10:39Effects for canvas interactions
- 14:10Inputs/outputs with Component Store
- 16:57Saving drawings to Firebase
- 17:19Key takeaways
related talks
34mReactive State Management For Your Angular App
19mNgRx Schematics
32mMessaging Design Patterns with NGRX
44mAngular + Redux ... stop, what?
01h 45mCrash Course: Angular and ngRx
27mThe good, the bad and the ugly - Component architecture at scale
21mSpeaker Q & A
24mConsistent UIs with Angular, RxJS and NgRx