Synchronized Web Apps: TanStack DB + Phoenix Sync (Part 2)

Finishing a local-first voting app called Food Captain using TanStack DB and Phoenix Sync.

This is Part 2 of a two-part series—we built the frontend side of this application in part 1.

What's covered:
- Setting up Phoenix Sync with embedded ElectricSQL
- Creating shapes to stream database changes to the browser
- Scoping data access with authenticated shape controllers
- Wiring up collection mutations (insert, update) to backend API endpoints
- Using Phoenix.Sync.Writer for complex multi-operation transactions
- Adding server-side validation with Ecto Multi
- Implementing ranked choice voting calculation on the backend

The result is a real-time collaborative voting app where changes sync instantly across all connected users. We go from localStorage prototype to production-ready backend with surprisingly little code.

Links
Screen recording software I use (affiliate): https://screen.studio/@Yy75o
Demo repository: https://github.com/ChristianAlexander/food_captain
Changes from this video: https://github.com/ChristianAlexander/food_captain/pull/2
Changes from after this video: https://github.com/ChristianAlexander/food_captain/pull/3
TanStack DB documentation: https://tanstack.com/db
Phoenix Sync: https://hexdocs.pm/phoenix_sync
ElectricSQL: https://electric-sql.com

Timestamps
What are we doing? - 00:00
Backend Setup - 03:34
First Shape - 05:43
Create Session - 10:02
CSRF - 16:12
Filtered Reads - 18:00
Single Shape - 20:03
Options Shape - 22:26
Editing Options - 27:50
Bulk Insert - 32:26
Read Votes - 37:03
CRUD Vote Sync - 38:44
Custom Validation - 47:04
Show the Results - 49:55

Видео Synchronized Web Apps: TanStack DB + Phoenix Sync (Part 2) канала Code and Stuff