finds.dev← search

// the find

dwyl/phoenix-liveview-chat-example

★ 162 · Elixir · updated Oct 2026

💬 Step-by-step tutorial creates a Chat App using Phoenix LiveView including Presence, Authentication and Style with Tailwind CSS

A step-by-step written tutorial for building a Phoenix LiveView chat app in Elixir, covering mount/handle_event basics, PubSub broadcasting, Presence, optional GitHub/Google auth via dwyl's own auth_plug, and Tailwind styling. It's aimed at developers who already know some Elixir/Phoenix and want a single worked example that goes past a toy counter demo into something with persistence, real-time updates, and tests.

Every step ships working code plus matching tests, and the repo itself has CI and codecov badges so you can verify the final state actually passes rather than trusting prose. It tackles real LiveView pain points other tutorials skip, like the client-owns-focused-input problem (solved with phx-hook instead of hand-waving it) and temporary_assigns to avoid accumulating the full message history in memory. Presence is wired end-to-end (track, presence_diff handling, guest vs named counts), which is usually left as an exercise elsewhere.

Authentication is built entirely around dwyl's own auth_plug and a hosted authdemo.fly.dev service you have to get an API key from — that's a dependency on a third party demo, not a pattern you'd actually deploy, and it'll be the first thing to break or go stale. The code targets the older Phoenix view/template split (message_view.ex, templates/message/*.heex) rather than the function-component style current Phoenix generators produce, so copying this into a fresh phx.new project means translating conventions. It's a single global chat room with a hardcoded 20-message window and no pagination — fine for a tutorial, but there's no guidance on what changes once you need more than one room or more history.

View on GitHub → Homepage ↗

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →