Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
A personal portfolio site with a header, hero photo, About / Experience / Projects / Contact sections, a subscribe modal that saves leads to a database, and a private admin page to email those subscribers a marketing campaign.
| Route | What it does |
|---|---|
/ | Public portfolio. Hero "Stay in touch" button opens a modal that POSTs to /api/subscribe. |
/admin | Private campaign composer. Enter your admin token, write a subject + message, and send to all subscribers. |
POST /api/subscribe | Validates and saves { name, email } to the subscribers SQLite table. |
POST /api/send-campaign | Admin-only (requires ADMIN_TOKEN). Emails every subscriber via Resend. |
/source | Redirects to the val's source code. |
| File | Role |
|---|---|
main.tsx | HTTP server + API routes. |
index.html / style.css / script.js | The public site and subscribe modal. |
admin.html / admin.js | The private campaign page. |
db.ts | SQLite schema + addSubscriber(). |
marketing.ts | sendCampaign() — fans out emails through the Resend API. |
Val Town's built-in std/email can only email you, so this uses
Resend (free tier: 100/day, 3,000/month) to reach real
subscribers. Three environment variables:
RESEND_API_KEY— create a key at https://resend.com/api-keys.ADMIN_TOKEN— any long random string. It protects/api/send-campaignso only you can trigger a send. You'll type it into the/adminpage.FROM_EMAIL(optional) — e.g.James <hello@yourdomain.com>. Requires a domain verified in Resend. Until then it defaults toonboarding@resend.dev, which only delivers to your own Resend account email (fine for testing).
Set them in the val's Environment Variables tab.
In the campaign subject or body, {{name}} is replaced with each subscriber's
name (falls back to "there" if empty).
They live in this val's SQLite subscribers table (id, name, email,
created_at) — browse it in the val's Database tab.
Rendering mermaid diagram...
