\n\t\t\t

{children}

\n\t\t\t\n\t\t

\n\t);\n}\n\nfunction BackLink() {\n\treturn (\n\t\t\n\t\t\t← back\n\t\t\n\t);\n}\n\nfunction Panel({ title, children }: { title: string; children: ReactNode }) {\n\treturn (\n\t\t

\n\t\t\t

{title}

\n\t\t\t{children}\n\t\t

\n\t);\n}\n\n// ============================================================================\n// Card Component\n// ============================================================================\n\ninterface PillCardProps {\n\tcolor: PillColor;\n\thref: string;\n\ttitle: string;\n\tdescription: string;\n}\n\nfunction PillCard({ color, href, title, description }: PillCardProps) {\n\tconst handleClick = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\ttrack({ type: 'pill_choice', pill: color, path: href });\n\t\twindow.location.href = href;\n\t};\n\n\tconst emoji = color === 'red' ? '🔴' : '🔵';\n\n\treturn (\n\t\t\n\t\t\t

\n\t\t\t\t{emoji} {title}\n\t\t\t

\n\t\t\t

{description}

\n\t\t\n\t);\n}\n\n// ============================================================================\n// Page Components\n// ============================================================================\n\nfunction Home() {\n\treturn (\n\t\t\n\t\t\t

VAL TOWN // APPLICATION

\n\t\t\t

Choose your path.

\n\t\t\t

\n\t\t\t\tTiny, shippable demo: routes, tracking, and an automation trigger—built\n\t\t\t\tlike a growth experiment.\n\t\t\t

\n\n\t\t\t

\n\t\t\t\t\n\t\t\t\t\n\t\t\t

\n\t\t\n\t);\n}\n\nfunction Red() {\n\treturn (\n\t\t\n\t\t\t\n\n\t\t\t

Andy Wingrave

\n\t\t\t

\n\t\t\t\tGrowth Engineer: shipping + analytics + automations + developer empathy\n\t\t\t

\n\n\t\t\t

\n\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t\tI like tools that make programming feel like play. Val Town is \"ship\n\t\t\t\t\t\tin minutes\" made real—and this role sits exactly where I work best:\n\t\t\t\t\t\tproduct + engineering + go-to-market.\n\t\t\t\t\t

\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t\t\tInstrument \"time-to-first-successful-val\" and cohort by template /\n\t\t\t\t\t\t\tentry point.\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tActivation: template gallery around dev JTBDs (email, cron,\n\t\t\t\t\t\t\twebhook).\n\t\t\t\t\t\t
3–5 tutorials that end with \"Remix this\".
Light loops: shareable pages + onboarding nudges.

\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t\tThis site logs page views + pill choices. Blue pill also triggers a\n\t\t\t\t\t\tserver-side automation.\n\t\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\tView recent events (JSON)\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t

\n\t\t\n\t);\n}\n\nfunction Blue() {\n\treturn (\n\t\t\n\t\t\t\n\n\t\t\t

Behind the curtain

\n\t\t\t

\n\t\t\t\tVisiting this route triggers a server handler: it logs an event and\n\t\t\t\toptionally POSTs a webhook / sends an email.\n\t\t\t

\n\n\t\t\t\n\t\t\t\t

Route hit: /blue
Event logged to SQLite
Webhook/email attempted (if configured)

\n\t\t\t\n\t\t\n\t);\n}\n\n// ============================================================================\n// Router & App\n// ============================================================================\n\nfunction Router() {\n\tconst path = window.location.pathname;\n\n\tswitch (path) {\n\t\tcase '/red':\n\t\t\treturn ;\n\t\tcase '/blue':\n\t\t\treturn ;\n\t\tdefault:\n\t\t\treturn ;\n\t}\n}\n\nfunction App() {\n\tuseEffect(() => {\n\t\ttrack({ type: 'page_view', path: window.location.pathname });\n\t}, []);\n\n\treturn ;\n}\n\n// ============================================================================\n// Mount\n// ============================================================================\n\nconst root = document.getElementById('root');\nif (!root) {\n\tthrow new Error('No root element found');\n}\n\ncreateRoot(root).render();\n","deleted","label",[173,174,155],"frontend","components","permalink","https://www.val.town/x/aphoristicepigram/pillChoice/code/frontend/components/App.tsx","extension","actionData","errors"]