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.
Track online shopping orders, shipping updates, and arrival dates in a calendar — with automatic package confirmation emails.
- 📊 Calendar view — Orders plotted on a monthly calendar by estimated arrival date
- 📋 Order list — Filterable list with status badges, tracking numbers, and order totals
- 🔍 Gmail scanning — Automatically scans your Gmail for order confirmations, shipping updates, and delivery notifications every 15 minutes
- ✅ Package confirmation — Sends "Did you receive this?" emails when packages are due, with a one-click confirm link
- 📈 Stats dashboard — Track ordered, shipped, delivered, and confirmed counts
Rendering mermaid diagram...
- Go to Google Account Security
- Enable 2-Step Verification (required)
- Go to App Passwords
- Create a new app password for "Mail" → "Other" (name it "Val Town")
- Copy the 16-character password
👉 Add GMAIL_USER here: https://www.val.town/x/adoran/order-tracker/environment-variables?key=GMAIL_USER
👉 Add GMAIL_PASS here: https://www.val.town/x/adoran/order-tracker/environment-variables?key=GMAIL_PASS
GMAIL_USER— Your full Gmail address (e.g.you@gmail.com)GMAIL_PASS— The app password from step 1
Visit the dashboard and click 🔍 Scan Now to do an initial scan of your last 7 days of email. The automatic interval will then scan every 15 minutes going forward.
- Gmail IMAP scan (
gmail.ts) — Connects via IMAP, searches for emails with order/shipping/tracking-related subjects - Email parsing — Extracts tracking numbers (UPS, FedEx, USPS, DHL, Amazon), carrier, retailer, estimated arrival dates, and order totals using regex patterns
- SQLite storage (
db.ts) — Deduplicates by message ID, updates status progression (ordered → shipped → delivered → confirmed) - Confirmation emails (
send-confirmation-email.ts) — When a package's estimated arrival date has passed, sends an email via Gmail SMTP with a one-click confirm link - Dashboard — React SPA with calendar grid and filterable order list
index.ts ← Hono server (API + serves frontend)
db.ts ← SQLite schema & query helpers
gmail.ts ← Gmail IMAP scanning & email parsing
scan-gmail.ts ← Interval job (every 15 min)
send-confirmation-email.ts ← Confirmation email sender (Gmail SMTP)
frontend/
index.html ← HTML shell (Twind + React)
index.tsx ← React entrypoint
components/
App.tsx ← Root component (state, data fetching)
Header.tsx ← Stats bar + Gmail status + view toggle
Calendar.tsx ← Monthly calendar grid with order details
OrderList.tsx ← Filterable order cards with confirm buttons
| Method | Path | Description |
|---|---|---|
| GET | / | Dashboard (React SPA) |
| GET | /api/orders | All orders |
| GET | /api/orders/:id | Single order |
| POST | /api/orders/:id/confirm | Confirm package received |
| GET | /api/orders/:id/confirm | Confirm via email link (redirects to dashboard) |
| GET | /api/stats | Order counts by status |
| GET | /api/calendar | Orders grouped by date |
| GET | /api/gmail/status | Gmail connection status & last scan |
| POST | /api/scan | Manually trigger Gmail scan |