create-analytics-demo

Scaffold a real-time analytics event visualization (WebSocket + browser).

Shows how events flow from your app to analytics services (Amplitude, Braze, etc.) with animated paths, code snippets, and an event history sidebar.

Usage

npx create-analytics-demo my-project

The CLI will ask for:

• App name — displayed in the UI
• Accent color — hex color for the brand theme

Use --defaults / -y to skip prompts.

Quick start

cd my-project
npm install
cd demo-server && npm install && cd ..
npm run demo

This opens http://localhost:3000 with the visualization. Then send events from your app or with curl:

curl -X POST http://localhost:3001/event \
  -H "Content-Type: application/json" \
  -d '{
    "event": "login completed",
    "userId": "u_123",
    "deviceId": "d_abc",
    "properties": {"method": "email"}
  }'

You'll see the event travel as an animated ball from the phone to the service logos. Click on a ball or sidebar item to see the Swift code snippet.

Customization

Edit src/demo.config.ts to change:

• App name and theme — colors, branding
• Services — names, colors, logos (put images in public/)
• Event categories — maps event names to display categories
• Secondary service events — which events also go to the second service
• Code snippets — Swift code shown when clicking an event
• Server/demo ports

Project structure

my-project/
├── demo-server/
│   └── server.js             # Express + WebSocket server
├── src/
│   ├── demo.config.ts        # ← Edit this to customize everything
│   ├── components/            # IPhoneFrame, TravelingBall, LiveCodePanel, etc.
│   └── demo/
│       └── DemoApp.tsx        # Main visualization
├── public/                   # Service logos go here
└── demo.html

How it works

1. demo-server receives POST requests at /event and broadcasts them via WebSocket
2. DemoApp connects to the WebSocket and visualizes each event as an animated ball traveling along SVG paths from the phone to the service logos
3. Click any event to see the corresponding code snippet
4. The sidebar shows a scrollable event history

Deploy

Pre-configured for Vercel (vercel.json) and Netlify (netlify.toml). Just connect your repo.

For the WebSocket server, deploy demo-server/ separately (e.g. Railway, Render) and update demo.wsUrl in demo.config.ts.