Public
Remixed
Track orders, shipping, arrival dates in a calendar
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.

📦 Order Tracker

Track online shopping orders, shipping updates, and arrival dates in a calendar — with automatic package confirmation emails.

Features

  • 📊 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

Architecture

Rendering mermaid diagram...

Setup

1. Gmail App Password

  1. Go to Google Account Security
  2. Enable 2-Step Verification (required)
  3. Go to App Passwords
  4. Create a new app password for "Mail" → "Other" (name it "Val Town")
  5. Copy the 16-character password

2. Set Environment Variables

👉 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

3. Start Tracking

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.

How It Works

  1. Gmail IMAP scan (gmail.ts) — Connects via IMAP, searches for emails with order/shipping/tracking-related subjects
  2. Email parsing — Extracts tracking numbers (UPS, FedEx, USPS, DHL, Amazon), carrier, retailer, estimated arrival dates, and order totals using regex patterns
  3. SQLite storage (db.ts) — Deduplicates by message ID, updates status progression (ordered → shipped → delivered → confirmed)
  4. 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
  5. Dashboard — React SPA with calendar grid and filterable order list

File Structure

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

API Routes

MethodPathDescription
GET/Dashboard (React SPA)
GET/api/ordersAll orders
GET/api/orders/:idSingle order
POST/api/orders/:id/confirmConfirm package received
GET/api/orders/:id/confirmConfirm via email link (redirects to dashboard)
GET/api/statsOrder counts by status
GET/api/calendarOrders grouped by date
GET/api/gmail/statusGmail connection status & last scan
POST/api/scanManually trigger Gmail scan