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",[],[100,175,388],{"_105":396,"_96":397,"_158":398,"_160":176,"_161":144,"_162":399,"_164":121,"_107":400,"_101":32,"_166":301,"_168":401,"_169":22,"_170":-5,"_171":402,"_99":403},"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",[],[100,175,397],{"_105":405,"_96":406,"_158":407,"_160":176,"_161":144,"_162":408,"_164":121,"_107":409,"_101":32,"_166":193,"_168":410,"_169":22,"_170":-5,"_171":411,"_99":412},"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",[],[100,175,406],{"_105":414,"_96":415,"_158":416,"_160":176,"_161":144,"_162":417,"_164":121,"_107":418,"_101":32,"_166":193,"_168":419,"_169":22,"_170":-5,"_171":420,"_99":421},"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();",[],[100,175,415],{"_105":423,"_96":424,"_158":425,"_160":176,"_161":144,"_162":426,"_164":121,"_107":427,"_101":32,"_166":193,"_168":428,"_169":22,"_170":-5,"_171":429,"_99":430},"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",[],[100,175,424],{"_105":432,"_96":433,"_158":434,"_160":176,"_161":144,"_162":435,"_164":121,"_107":436,"_101":32,"_166":301,"_168":401,"_169":22,"_170":-5,"_171":437,"_99":438},"90819338-e5e0-11f0-b687-42dde27851f2","index_20251230193335.html","90819432-e5e0-11f0-b687-42dde27851f2",101,["D",1767141310821],[],[100,175,433],{"_105":440,"_96":441,"_158":442,"_160":176,"_161":144,"_162":443,"_164":121,"_107":444,"_101":32,"_166":193,"_168":445,"_169":22,"_170":-5,"_171":446,"_99":447},"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",[],[100,175,441],{"_105":449,"_96":450,"_158":451,"_160":176,"_161":144,"_162":452,"_164":121,"_107":453,"_101":32,"_166":193,"_168":454,"_169":22,"_170":-5,"_171":455,"_99":456},"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",[],[100,175,450],{"_105":458,"_96":459,"_158":460,"_160":176,"_161":144,"_162":461,"_164":121,"_107":462,"_101":32,"_166":193,"_168":463,"_169":22,"_170":-5,"_171":464,"_99":465},"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