A web app that allows you to track one Royal Mail tracking ID and get updates as a notification in your browser as it goes through the Royal Mail network.
Deployed on Cloudflare Pages with Cloudflare Workers backend and D1 database for data persistence.
- ✅ Track Royal Mail packages using tracking ID
- ✅ Automatic tracking ID validation (format: AB123456789GB)
- ✅ Browser notifications for status updates
- ✅ Periodic checking every 15 minutes
- ✅ Automatic stop after delivery
- ✅ Tracking history
- ✅ Cloudflare Workers API backend
- ✅ D1 SQLite database for data persistence
- ✅ Automatic deployment via GitHub Actions
- Visit the deployed app or run locally
- Enter your Royal Mail tracking ID (format: 2 letters + 9 digits + 2 letters, e.g., AB123456789GB)
- Optionally enable browser notifications to get alerts when status changes
- Click "Start Tracking"
- The app will check for updates every 15 minutes via the API
- Once your package is delivered, tracking stops automatically
Royal Mail tracking IDs follow this format:
- 2 letters (e.g., AB)
- 9 digits (e.g., 123456789)
- 2 letters (e.g., GB)
Example: AB123456789GB
- Single-page application with vanilla JavaScript
- Browser notifications via Web Notifications API
- Service Worker for background updates and caching
- Local session persistence for continuity
- RESTful API endpoints for tracking operations
- D1 SQLite database for persistent storage
- Automatic status checking via API
- Mock Royal Mail API integration (ready for production API)
- GitHub Actions automatically deploys to Cloudflare Pages
- Database migrations can be run via Wrangler CLI
- Validation: The app validates your tracking ID format before starting
- API Storage: Tracking data is stored in Cloudflare D1 database
- Periodic Checks: Every 15 minutes, the frontend calls the API to check status
- Notifications: If enabled and the status changes, you'll receive a browser notification
- Auto-Stop: Once the package is marked as delivered, checking stops automatically
This app works in modern browsers that support:
- Web Notifications API
- Service Workers
- LocalStorage
- ES6 JavaScript
Tested on:
- Chrome/Edge (recommended)
- Firefox
- Safari
Tracking data is stored securely in Cloudflare D1 database. The app only stores tracking IDs and status information. No personal information is collected.
- Install Wrangler CLI:
npm install -g wrangler- Create D1 database:
wrangler d1 create rmtrack-db-
Update
wrangler.tomlwith your database ID -
Run migrations:
wrangler d1 execute rmtrack-db --file=migrations/0001_initial_schema.sql- Run locally:
wrangler pages dev public --d1 DB=rmtrack-dbrmtrack/
├── public/ # Static frontend files
│ ├── index.html # Main HTML structure
│ ├── styles.css # Styling and layout
│ ├── app.js # Frontend application logic
│ └── service-worker.js # Service worker for notifications
├── functions/ # Cloudflare Workers functions
│ └── api/
│ └── [[path]].js # API routes handler
├── migrations/ # D1 database migrations
│ └── 0001_initial_schema.sql
├── wrangler.toml # Cloudflare configuration
└── .github/workflows/ # GitHub Actions
└── deploy.yml # Deployment workflow
- Cloudflare account
- GitHub repository
- Cloudflare API token with Pages and D1 permissions
-
Create Cloudflare Pages project:
- Go to Cloudflare Dashboard → Pages
- Create a new project named
rmtrack
-
Create D1 database:
wrangler d1 create rmtrack-db-
Add GitHub Secrets:
CLOUDFLARE_API_TOKEN: Your Cloudflare API tokenCLOUDFLARE_ACCOUNT_ID: Your Cloudflare account ID
-
Update wrangler.toml with your database ID
-
Run database migrations:
wrangler d1 execute rmtrack-db --file=migrations/0001_initial_schema.sql --remote- Push to GitHub - automatic deployment via Actions
POST /api/tracking- Add new tracking IDGET /api/tracking/:id- Get tracking informationPOST /api/tracking/:id/check- Check for status updatesDELETE /api/tracking/:id- Stop trackingGET /api/health- Health check
MIT License - see LICENSE file for details