Meetup Mini App

A mini app built with Antler Local First Auth that displays a real-time list of attendees as they scan a QR code. Perfect for meetups and events.

Note: This repository is built to deploy to Cloudflare. For self-hosting, see meetup-self-hosted. We recommend using Cloudflare because it works on Cloudflare's free tier.

How It Works

1. User scans QR code with Antler Local First Auth
2. Client requests profile from window.localFirstAuth.getProfileDetails() API
3. Local First Auth generates and signs JWT with profile details
4. Server verifies JWT, stores user in D1 database
5. Durable Object broadcasts update via WebSocket to all connected clients
6. Real-time attendee list updates automatically

Project Structure

This is a pnpm workspace monorepo with three packages:

• client/ - React frontend
• server/ - Cloudflare Workers, D1 (SQLite), Durable Objects
• shared/ - JWT verification and utilities

Run the app locally

pnpm install              # Install dependencies
pnpm db:migrate:local     # Initialize local D1 database
pnpm run dev              # Start development server

Optional: Edit data.json to customize your meetup details (title, description, etc.)

Open http://localhost:5173 in your browser. The Local First Auth Simulator will auto-login with a test profile.

Note: http://localhost:8787 is your backend. It is mapped to http://localhost:5173/api for convenience.

Debugging with Local First Auth Simulator

Note: The Local First Auth Simulator is a development-only tool. Never use in production.

The simulator automatically injects the window.localFirstAuth API in development mode:

if (import.meta.env.DEV) {
  const simulator = await import('local-first-auth-simulator')
  simulator.enableLocalFirstAuthSimulator()
}

Features:

• Auto-loads test profile (Paul Morphy)
• Floating debug panel
• Click "Open as X" to simulate multiple users in separate tabs
• Load profiles via URL: ?test_profile=<id>

Deployment

This app deploys entirely to Cloudflare using:

• Cloudflare Workers for API routes
• Cloudflare D1 for SQLite database
• Cloudflare Durable Objects for WebSocket broadcasting
• Alchemy SDK for infrastructure-as-code

Prerequisites:

• Cloudflare account (free tier works!)
• Alchemy CLI installed (brew install alchemy)

Note: Alchemy stores the state of the deployment inside .alchemy/state.json. It is created after the first deployment. You can store this file locally, but we have added it to the .gitignore file to avoid committing it to the repository. We have configured Alchemy to store the state of the deployment inside a Cloudflare Durable Object, see alchemy.run.ts for more details.

Configure Cloudflare API token in Alchemy (see Alchemy CLI Documentation):

alchemy configure

Copy .env.example to .env and update ALCHEMY_STATE_TOKEN. This is used to store the state of the deployment in a remote state store.

To deploy the app:

pnpm run deploy:cloudflare