Context
PingTrail (originally GPS Tracker) was born from a specific safety need: providing a reliable, real-time map for family and friends to track my position during remote hiking expeditions. While satellite messengers like the SPOT Gen4 excel at transmission, their default interfaces often lack responsiveness and custom filtering for multi-day treks.
This project involved building a custom mapping engine that consumes satellite data feeds and presents them through a performant, mobile-first dashboard.
Technical Architecture and Data Pipeline
The application is built with Next.js 15 and Leaflet, using a synchronized data pipeline to ensure accuracy in areas with intermittent connectivity.
Satellite Data Integration
The system interacts directly with the SPOT API. Because satellite pings are often irregular, I implemented a robust caching and parsing layer:
- Real-time Ingestion: The backend fetches XML/JSON feeds and normalizes different message types —
OK,CUSTOM, and criticalHELPorSOSsignals - State Management: With Supabase as persistent storage, the app tracks not only coordinates but also device health metrics (battery, Active/Inactive states)
- Time Filtering: To avoid map clutter on long expeditions, users can filter views by duration (e.g., last 24 h, last 7 days)
Interactive Mapping
For the frontend, I chose Leaflet for its lightness and extensibility. The map displays dynamic polylines connecting pings chronologically, allowing viewers to see not only my current position but the exact route traveled.
Security and Permission System
For a safety tool, access control is paramount. I integrated PingTrail with my Global SSO Authenticator to manage high-level permissions while adding a specialized sharing layer.
Magic Link Invitations
I developed a "Magic Link" system that allows granting temporary read-only access to specific trackers.
- Role-Based Access: Distinction between Admins (who manage tracker feeds) and Viewers (who only see the map)
- Secure Redemption: Invitation links are single-use or time-limited, ensuring my private location data is not exposed beyond the intended circle
Technical Constraints and Tradeoffs
One of the main constraints was the SPOT API rate limit. To address this, I designed a polling strategy that prioritizes updates based on active movement detection, reducing unnecessary API calls while maintaining a "live" feel for the user.
I also chose next-intl for localization, so safety instructions and status messages are accessible in French and English for different family members.
Technical Stack
- Frontend: Next.js 15 (App Router), React, TypeScript, Leaflet, Tailwind CSS
- Backend: Supabase (persistent storage for coordinates and device metrics)
- API: SPOT Shared Page API (XML/JSON feeds)
- Auth: Global SSO Authenticator integration
- Hosting: Vercel
Takeaway
PingTrail is more than a mapping project; it is critical safety infrastructure. It demonstrates the value of building custom interfaces for specialized hardware, transforming raw satellite data into a clear, shareable narrative of an expedition. The project has evolved from a simple position viewer to a multi-tracker platform ready for any remote adventure.
