Customer Tracking Portal
Authenticated SPA for customers to track packages from Florida to Roatan
Architecture
Single self-contained HTML file. No build system, no framework. DOM-based SPA using show/hide toggling.
👤
Login Page
Firebase Auth + JIT
→
🏠
Home View
Tracking options
→
📦
Track / View All
Firestore queries
| Technology | Details |
|---|
| Framework | Vanilla HTML/CSS/JavaScript (single file) |
| Firebase | Auth v10.12.2 + Firestore (project: max-inventory-scanner-b0b53) |
| Fonts | Bunny Fonts — Urbanist + Poppins |
| Icons | Font Awesome 6.5.2 |
| Chatbot | n8n Chat Widget |
Authentication Flow
JIT (Just-In-Time) Provisioning — Firebase Auth accounts created on first login for 3,000+ existing customers.
1
Customer enters email + password (max{clientId} default format)
↓
2
Check localStorage for stored auth email (password change history)
↓
3
Try signInWithEmailAndPassword — normal format, then email+refId format for duplicates
↓
4
JIT Fallback: Query Firestore Clients, validate password, call createUserWithEmailAndPassword
↓
5
First login? Force password change modal (blocks navigation until changed)
Duplicate Email Handling
Multiple customers can share the same email (e.g., a family). System uses alias format: user+2245@example.com vs user+7218@example.com
Admin Mode
Separate login via "I'm an Admin" button. Queries User collection. Can search any customer by ID and view their packages.
Package Status Flow
Received
→
Checked-In
→
In Transit
→
Ready for Pickup
→
Picked Up
Packages can also be Consolidated into a main package
Views
Home View
Welcome screen with two buttons: "Track a Package" (single lookup) and "View All Packages" (full list). Shown after customer login.
Admin Home View
Customer search panel. Admin enters a numeric client ID to search the Clients collection and view that customer's packages.
Single Tracking View
Enter tracking number, see color-coded status badge, estimated dates, horizontal timeline, and consolidation info.
All Packages View
Paginated list grouped by status (Checked-In, In Transit, Ready for Pickup, Picked Up). 20 per page with search bar and summary stats.
Firestore Collections
| Collection | Access | Purpose |
|---|
| Clients | Read | Customer lookup by email and/or referenceId |
| Packages | Read | Package data by trackingNumber or clientID |
| Containers | Read | Container shipment info for in-transit packages |
| User | Read | Admin credentials (username + password) |
The app is strictly read-only on Firestore. The only write is Firebase Auth account creation during JIT provisioning.