Val Town React + Hono Starter

\n \n\n \n

\n Hidden page + automation trigger + instrumentation proof\n

\n \n

\n \n );\n}\n\nfunction Red() {\n return (\n \n \n ← back\n \n\n

Andy Wingrave

\n Growth Engineer: shipping + analytics + automations + developer empathy\n

\n\n

Why Val Town

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

\n\n

Week 1–2 experiments

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

\n\n

Instrumentation

\n This site logs page views + pill choices. Blue pill also triggers a\n server-side automation.\n

\n \n View recent events (JSON)\n \n

\n \n );\n}\n\nfunction Blue() {\n return (\n \n \n ← back\n \n\n

Behind the curtain

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

\n\n

Proof

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

\n\t\t\t

{children}

\n\t\t\t

\n\t\t\t\tBuilt on Val Town · Hono + React · logs pill choice + page views\n\t\t\t

\n\t\t

\n\t);\n}\n\nfunction Home() {\n\tconst handleRedClick = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\ttrack({ type: 'pill_choice', pill: 'red', path: '/red' });\n\t\twindow.location.href = '/red';\n\t};\n\n\tconst handleBlueClick = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\ttrack({ type: 'pill_choice', pill: 'blue', path: '/blue' });\n\t\twindow.location.href = '/blue';\n\t};\n\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\t

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

\n\t\t\t\t\t\tHidden page + automation trigger + instrumentation proof\n\t\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\t\t\t\t← back\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

Why Val Town

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

\n\t\t\t\t\t\tI like tools that make programming feel like play. Val Town is\n\t\t\t\t\t\t"ship in minutes" made real—and this role sits exactly\n\t\t\t\t\t\twhere I work best: product + 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

Week 1–2 experiments

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

\n\t\t\t\t\t\t\tInstrument "time-to-first-successful-val" and cohort by\n\t\t\t\t\t\t\ttemplate / entry 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

Instrumentation

\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\t\t\t\t← back\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

Proof

\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\nfunction App() {\n\tuseEffect(() => {\n\t\ttrack({ type: 'page_view', path: window.location.pathname });\n\t}, []);\n\n\tconst path = window.location.pathname;\n\tif (path === '/red') return ;\n\tif (path === '/blue') return ;\n\treturn ;\n}\n\nconst root = document.getElementById('root');\nif (!root) {\n\tthrow new Error('No root element found');\n}\n\ncreateRoot(root).render();\n",[],[158,176,389],{"_105":397,"_96":398,"_159":399,"_161":177,"_162":144,"_163":400,"_165":121,"_107":401,"_101":32,"_167":302,"_169":402,"_170":22,"_171":-5,"_172":403,"_99":404},"edd2ab86-e5da-11f0-b4e9-42dde27851f2","index_20251230185424.html","edd2ac30-e5da-11f0-b4e9-42dde27851f2",87,["D",1767138890403],"\n\n\t\n\t\t\n\t\t\n\t\tVal Town Application\n\t\t\n\t\n\t\n\t\t

\n\t\t\t

\n\t\t

\n\t\t\n\t\n\n",[],[158,176,398],{"_105":406,"_96":407,"_159":408,"_161":177,"_162":144,"_163":409,"_165":121,"_107":410,"_101":32,"_167":194,"_169":411,"_170":22,"_171":-5,"_172":412,"_99":413},"ee350092-e5da-11f0-8ef1-42dde27851f2","index_20251230185437.tsx","ee350146-e5da-11f0-8ef1-42dde27851f2",99,["D",1767138890405],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport { useEffect } from 'https://esm.sh/react@18.2.0';\nimport type { ReactNode, MouseEvent } from 'https://esm.sh/react@18.2.0';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype TrackEvent = {\n\ttype: 'page_view' | 'pill_choice';\n\tpill?: 'red' | 'blue';\n\tpath?: string;\n};\n\n// ============================================================================\n// Analytics\n// ============================================================================\n\nfunction track(evt: TrackEvent): void {\n\tfetch('/api/track', {\n\t\tmethod: 'POST',\n\t\theaders: { 'content-type': 'application/json' },\n\t\tbody: JSON.stringify({\n\t\t\t...evt,\n\t\t\tpath: evt.path ?? window.location.pathname,\n\t\t}),\n\t}).catch(() => {});\n}\n\n// ============================================================================\n// Layout Components\n// ============================================================================\n\nfunction Shell({ children }: { children: ReactNode }) {\n\treturn (\n\t\t

\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// Page Components\n// ============================================================================\n\nfunction Home() {\n\tconst handleRedClick = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\ttrack({ type: 'pill_choice', pill: 'red', path: '/red' });\n\t\twindow.location.href = '/red';\n\t};\n\n\tconst handleBlueClick = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\ttrack({ type: 'pill_choice', pill: 'blue', path: '/blue' });\n\t\twindow.location.href = '/blue';\n\t};\n\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\t

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

\n\t\t\t\t\t\tHidden page + automation trigger + instrumentation proof\n\t\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\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 App() {\n\tuseEffect(() => {\n\t\ttrack({ type: 'page_view', path: window.location.pathname });\n\t}, []);\n\n\tconst path = window.location.pathname;\n\tif (path === '/red') return ;\n\tif (path === '/blue') return ;\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",[],[158,176,407],{"_105":415,"_96":416,"_159":417,"_161":177,"_162":144,"_163":418,"_165":121,"_107":419,"_101":32,"_167":194,"_169":420,"_170":22,"_171":-5,"_172":421,"_99":422},"90df5e50-e5e0-11f0-8045-42dde27851f2","index_20251230193316.tsx","90df5f36-e5e0-11f0-8045-42dde27851f2",110,["D",1767141310797],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { ReactNode, MouseEvent } from \"https://esm.sh/react@18.2.0\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype TrackEvent = {\n type: \"page_view\" | \"pill_choice\";\n pill?: \"red\" | \"blue\";\n path?: string;\n};\n\n// ============================================================================\n// Analytics\n// ============================================================================\n\nfunction track(evt: TrackEvent): void {\n fetch(\"/api/track\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({\n ...evt,\n path: evt.path ?? window.location.pathname,\n }),\n }).catch(() => {});\n}\n\n// ============================================================================\n// Layout Components\n// ============================================================================\n\nfunction Shell({ children }: { children: ReactNode }) {\n return (\n

{children}

\n \n

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

{title}

\n {children}\n

\n );\n}\n\n// ============================================================================\n// Page Components\n// ============================================================================\n\nfunction Home() {\n const handleRedClick = (e: MouseEvent) => {\n e.preventDefault();\n track({ type: \"pill_choice\", pill: \"red\", path: \"/red\" });\n window.location.href = \"/red\";\n };\n\n const handleBlueClick = (e: MouseEvent) => {\n e.preventDefault();\n track({ type: \"pill_choice\", pill: \"blue\", path: \"/blue\" });\n window.location.href = \"/blue\";\n };\n\n return (\n \n

VAL TOWN // APPLICATION

Choose your path.

\n Tiny, shippable demo: routes, tracking, and an automation trigger—built\n like a growth experiment.\n

\n\n {/* Hero image section */}\n

\n $\"Red$ \n $\"Andy$ \n $\"Blue$ \n

\n\n

\n \n

\n \n\n \n

\n Hidden page + automation trigger + instrumentation proof\n

\n \n

\n \n );\n}\n\nfunction Red() {\n return (\n \n \n\n

Andy Wingrave

\n Growth Engineer: shipping + analytics + automations + developer empathy\n

\n\n

\n \n

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

\n \n\n \n

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

\n \n\n \n

\n This site logs page views + pill choices. Blue pill also triggers a\n server-side automation.\n

\n \n View recent events (JSON)\n \n \n

\n \n );\n}\n\nfunction Blue() {\n return (\n \n \n\n

Behind the curtain

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

\n\n \n

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

\n \n \n );\n}\n\n// ============================================================================\n// Router & App\n// ============================================================================\n\nfunction App() {\n useEffect(() => {\n track({ type: \"page_view\", path: window.location.pathname });\n }, []);\n\n const path = window.location.pathname;\n if (path === \"/red\") return ;\n if (path === \"/blue\") return ;\n return ;\n}\n\n// ============================================================================\n// Mount\n// ============================================================================\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[158,176,416],{"_105":424,"_96":425,"_159":426,"_161":177,"_162":144,"_163":427,"_165":121,"_107":428,"_101":32,"_167":194,"_169":429,"_170":22,"_171":-5,"_172":430,"_99":431},"909543ba-e5e0-11f0-975c-42dde27851f2","index_20251230193317.tsx","9095446e-e5e0-11f0-975c-42dde27851f2",104,["D",1767141310800],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport { useEffect } from 'https://esm.sh/react@18.2.0';\nimport type { ReactNode, MouseEvent } from 'https://esm.sh/react@18.2.0';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype TrackEvent = {\n\ttype: 'page_view' | 'pill_choice';\n\tpill?: 'red' | 'blue';\n\tpath?: string;\n};\n\n// ============================================================================\n// Analytics\n// ============================================================================\n\nfunction track(evt: TrackEvent): void {\n\tfetch('/api/track', {\n\t\tmethod: 'POST',\n\t\theaders: { 'content-type': 'application/json' },\n\t\tbody: JSON.stringify({\n\t\t\t...evt,\n\t\t\tpath: evt.path ?? window.location.pathname,\n\t\t}),\n\t}).catch(() => {});\n}\n\n// ============================================================================\n// Layout Components\n// ============================================================================\n\nfunction Shell({ children }: { children: ReactNode }) {\n\treturn (\n\t\t

\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

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{/* Hero image section */}\n\t\t\t

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\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\n\n\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t\tHidden page + automation trigger + instrumentation proof\n\t\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\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 App() {\n\tuseEffect(() => {\n\t\ttrack({ type: 'page_view', path: window.location.pathname });\n\t}, []);\n\n\tconst path = window.location.pathname;\n\tif (path === '/red') return ;\n\tif (path === '/blue') return ;\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",[],[158,176,425],{"_105":433,"_96":434,"_159":435,"_161":177,"_162":144,"_163":436,"_165":121,"_107":437,"_101":32,"_167":302,"_169":402,"_170":22,"_171":-5,"_172":438,"_99":439},"90819338-e5e0-11f0-b687-42dde27851f2","index_20251230193335.html","90819432-e5e0-11f0-b687-42dde27851f2",101,["D",1767141310821],[],[158,176,434],{"_105":441,"_96":442,"_159":443,"_161":177,"_162":144,"_163":444,"_165":121,"_107":445,"_101":32,"_167":194,"_169":446,"_170":22,"_171":-5,"_172":447,"_99":448},"4ce5f726-e5e1-11f0-a1ea-42dde27851f2","index_20251230194014.tsx","4ce5f7ee-e5e1-11f0-a1ea-42dde27851f2",113,["D",1767141626851],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport { useEffect } from 'https://esm.sh/react@18.2.0';\nimport type { ReactNode, MouseEvent } from 'https://esm.sh/react@18.2.0';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype TrackEvent = {\n\ttype: 'page_view' | 'pill_choice';\n\tpill?: 'red' | 'blue';\n\tpath?: string;\n};\n\n// ============================================================================\n// Analytics\n// ============================================================================\n\nfunction track(evt: TrackEvent): void {\n\tfetch('/api/track', {\n\t\tmethod: 'POST',\n\t\theaders: { 'content-type': 'application/json' },\n\t\tbody: JSON.stringify({\n\t\t\t...evt,\n\t\t\tpath: evt.path ?? window.location.pathname,\n\t\t}),\n\t}).catch(() => {});\n}\n\n// ============================================================================\n// Layout Components\n// ============================================================================\n\nfunction Shell({ children }: { children: ReactNode }) {\n\treturn (\n\t\t

\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

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{/* Hero image section */}\n\t\t\t

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

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

\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\n\n\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t\tHidden page + automation trigger + instrumentation proof\n\t\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\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 App() {\n\tuseEffect(() => {\n\t\ttrack({ type: 'page_view', path: window.location.pathname });\n\t}, []);\n\n\tconst path = window.location.pathname;\n\tif (path === '/red') return ;\n\tif (path === '/blue') return ;\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",[],[158,176,442],{"_105":450,"_96":451,"_159":452,"_161":177,"_162":144,"_163":453,"_165":121,"_107":454,"_101":32,"_167":194,"_169":455,"_170":22,"_171":-5,"_172":456,"_99":457},"1aac9296-e5e2-11f0-a68a-42dde27851f2","index_20251230194502.tsx","1aac9354-e5e2-11f0-a68a-42dde27851f2",117,["D",1767141972097],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport { useEffect } from 'https://esm.sh/react@18.2.0';\nimport type { ReactNode, MouseEvent } from 'https://esm.sh/react@18.2.0';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype TrackEvent = {\n\ttype: 'page_view' | 'pill_choice';\n\tpill?: 'red' | 'blue';\n\tpath?: string;\n};\n\n// ============================================================================\n// Analytics\n// ============================================================================\n\nfunction track(evt: TrackEvent): void {\n\tfetch('/api/track', {\n\t\tmethod: 'POST',\n\t\theaders: { 'content-type': 'application/json' },\n\t\tbody: JSON.stringify({\n\t\t\t...evt,\n\t\t\tpath: evt.path ?? window.location.pathname,\n\t\t}),\n\t}).catch(() => {});\n}\n\n// ============================================================================\n// Layout Components\n// ============================================================================\n\nfunction Shell({ children }: { children: ReactNode }) {\n\treturn (\n\t\t

\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

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{/* Hero image section */}\n\t\t\t

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

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

\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\n\n\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t\tHidden page + automation trigger + instrumentation proof\n\t\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\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 App() {\n\tuseEffect(() => {\n\t\ttrack({ type: 'page_view', path: window.location.pathname });\n\t}, []);\n\n\tconst path = window.location.pathname;\n\tif (path === '/red') return ;\n\tif (path === '/blue') return ;\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",[],[158,176,451],{"_105":459,"_96":460,"_159":461,"_161":177,"_162":144,"_163":462,"_165":121,"_107":463,"_101":32,"_167":194,"_169":464,"_170":22,"_171":-5,"_172":465,"_99":466},"d4e01e56-e5e4-11f0-8a6f-42dde27851f2","index_20251230200509.tsx","d4e01f5a-e5e4-11f0-8a6f-42dde27851f2",122,["D",1767143143360],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';\nimport { useEffect, useState } from 'https://esm.sh/react@18.2.0';\nimport type { ReactNode, MouseEvent } from 'https://esm.sh/react@18.2.0';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype TrackEvent = {\n\ttype: 'page_view' | 'pill_choice';\n\tpill?: 'red' | 'blue';\n\tpath?: string;\n};\n\ntype EventRecord = {\n\tid: number;\n\tts: string;\n\ttype: string;\n\tpill: string | null;\n\tpath: string;\n};\n\n// ============================================================================\n// Analytics\n// ============================================================================\n\nfunction track(evt: TrackEvent): void {\n\tfetch('/api/track', {\n\t\tmethod: 'POST',\n\t\theaders: { 'content-type': 'application/json' },\n\t\tbody: JSON.stringify({\n\t\t\t...evt,\n\t\t\tpath: evt.path ?? window.location.pathname,\n\t\t}),\n\t}).catch(() => {});\n}\n\n// ============================================================================\n// Layout Components\n// ============================================================================\n\nfunction Shell({\n\tchildren,\n\tclassName = '',\n}: {\n\tchildren: ReactNode;\n\tclassName?: string;\n}) {\n\treturn (\n\t\t

\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 to the choice\n\t\t\n\t);\n}\n\n// ============================================================================\n// Home Page\n// ============================================================================\n\nfunction Home() {\n\tconst handleRedClick = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\ttrack({ type: 'pill_choice', pill: 'red', path: '/red' });\n\t\twindow.location.href = '/red';\n\t};\n\n\tconst handleBlueClick = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\ttrack({ type: 'pill_choice', pill: 'blue', path: '/blue' });\n\t\twindow.location.href = '/blue';\n\t};\n\n\treturn (\n\t\t\n\t\t\t

VAL TOWN // GROWTH ENGINEER APPLICATION

\n\t\t\t

Choose your path.

\n\t\t\t

\n\t\t\t\tThis is my application for Val Town's Growth Engineer role—built as a\n\t\t\t\tVal Town project to show I can ship ideas in minutes, not days.\n\t\t\t

\n\n\t\t\t{/* Hero image section */}\n\t\t\t

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

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

\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\t🔴 Red Pill — Hire Your Growth Engineer\n\t\t\t\t\t

\n\t\t\t\t\t\tMy CV, tailored to this role + what I'd ship in week 1\n\t\t\t\t\t

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

🔵 Blue Pill — Behind the Curtain

aphoristicepigram

pillChoice