// the find
dwyl/phoenix-liveview-counter-tutorial
🤯 beginners tutorial building a real time counter in Phoenix + LiveView⚡️ Learn the fundamentals from first principals so you can make something amazing! 🚀
A step-by-step beginner tutorial that walks through building a shared, real-time counter in Phoenix LiveView, going from a bare `mix phx.new` app to a tested, broadcasting counter with under 40 lines of application code. It's aimed squarely at people who have never touched Phoenix or LiveView before, not at experienced Elixir developers looking for patterns.
The progression is genuinely well-scaffolded: single-client counter first, then PubSub broadcast for shared state, then a LiveComponent extraction, each with a checkpoint to run and verify before moving on. It also treats testing as part of the tutorial rather than an afterthought, walking through excoveralls setup and getting a trivial app to 100% coverage, which is a good habit to model even at this scale. CI is wired up via GitHub Actions and the deployed Fly.io demo means you can compare your own output against a known-good instance.
The counter's shared state lives entirely in PubSub broadcasts with no server-side source of truth, so a client that connects after others have already incremented the count just starts at 0 and drifts out of sync until the next event — that's a real gap for anyone using this as a template for actual shared state instead of a toy. The README is extremely verbose for what is ~40 lines of code, padding the explanation with emoji and Elixir syntax asides that will slow down anyone who isn't a total beginner. It's also Phoenix 1.7-specific (CoreComponents, `.button`), so version drift against current Phoenix releases is likely to break the exact steps over time, and there's no discussion of how this pattern would need to change under real concurrent load or with a GenServer-backed count (the 'moving state out of the LiveView' section is mentioned in the TOC but the truncated content suggests it's still fairly thin).