What you’ll build
One app runs the whole way through: a sprint retro board. Three columns of sticky notes, a vote count on each one, and a roster showing who is reading what. Each step adds one working piece — a title, notes, votes, presence — to the same codebase.
Once notes work, you’ll open the board in two tabs and add notes from both at the same instant. Both notes survive, and you’ll see why. Votes get the same treatment: build the count first, then compare it with a read-modify-write counter that loses concurrent votes.
You’ll need the Gleam toolchain throughout, and a floodgate server for the first five steps. The last step needs no server. Each code sample comes from the complete tutorial project.
- titleString field → the board’s name
- notesOR-map · RegisterMode → note id to whole note
- votesOR-map · TallyMode → note id to signed total
- ↯ focuspresence → who’s reading which note
The survey procedure
Six sheets, in order. Each ends where the next begins.
- 01 Connect the board Open the same empty board in two browser tabs. connect_dev · root_typed · ensure_or_map · subscribe
- 02 Add notes Create a note and watch it show up in both tabs. RegisterMode · or_map_set_json · or_map_entries
- 03 Try two edits at once Add notes from both tabs at the same instant and confirm both appear. sluice · or_map_set_json · or_map_entries
- 04 Add votes Build a vote count that stays correct even when clicks overlap. TallyMode · or_map_increment · Tally
- 05 Add presence Show who is looking at each note, and clear it when they leave. presence.config · watershed_lustre.presence · update_presence
- 06 Write repeatable tests Turn the two-tab checks you’ve been running by hand into tests you can run anytime. sluice_js · start · settle · step