Reach

Buzzer app for quiz games. Players join a team on their phones. The host runs the game from a separate page.

The backend is a Phoenix 1.8 app in lib/. The frontend is a Vue 3 app in assets/, built with Vite.

Development

Requires Elixir 1.18 or later and Node.js 20.19 or later.

• Install dependencies with mix setup.
• Start the server with mix phx.server. This also starts the Vite dev server.
• Open localhost:5173. Vite proxies the game socket to Phoenix on port 4000.

Players join from /. The host page is at /#/admin.

Tests

• Backend: run mix test. Add --cover for a coverage report.
• Frontend: run npm test and npm run lint in assets/. Run npm run coverage for a coverage report.

Production

Build the frontend into priv/static, then build a release:

mix assets.build
MIX_ENV=prod mix release

Set these environment variables:

• SECRET_KEY_BASE: required. Generate one with mix phx.gen.secret.
• PORT: HTTP port. Defaults to 4000.
• PHX_HOST: public hostname. Defaults to buzzer.moso.moe. Websocket connections from other origins are rejected.
• PHX_SERVER=true: starts the web server. A release needs this.

Run the app behind a reverse proxy that terminates TLS.

Game state

All game state lives in the Reach.Game process. It handles requests one at a time, in the order they arrive.

Each player is tied to the channel process that joined them. The player is removed when that process exits. A client that reconnects can rejoin as the same player by sending the token it joined with.

The server sends every client the full game state after each change. Each snapshot has a version number. Clients ignore any snapshot older than the one they have.