What speed units would you like to display (e.g., mph, km/h, or both with toggle)? Both with toggle
What data should be saved in the history (e.g., track sessions, top speed, average speed)? Track sessions, Top speed records, Average speed, Distance traveled, Duration
Where should data be stored? Browser local storage only
Now let me start building. First, I'll create the data models and utilities for localStorage management.
Now I'll create the data models and utilities:
Now I'll create utility functions for GPS calculations and unit conversions:
Now I'll create custom hooks for GPS tracking and session management:
Now I'll create the main Speed Tracker page with the GPS display and session controls:
Now I'll create the main tracker page:
Now I'll create the history page:
Now I'll create the session detail page with the speed chart:
Now let me update the layout to add better metadata and viewport settings for mobile:
Now let me move to the next task and create a custom hook for unit preference management:
Now let me add global styles for better mobile optimization and add a custom hook for managing unit preference globally:
Now I'll enhance the globals CSS with mobile-specific optimizations:
Now I'll improve the SpeedDisplay component for better mobile responsiveness and add haptic feedback support:
Now I'll improve the main page with better mobile responsiveness:
Now let me improve the history page for mobile:
Now let me optimize the session detail page for mobile:
Let me also improve the SpeedChart component for mobile:
Now let me mark the project as complete and provide a summary:
Your real-time GPS speed tracker app is complete and ready to use on iOS Safari and Android Chrome. Here's what I built:
Main Speed Tracker Page - Displays real-time GPS speed with an animated gauge, top speed, average speed, distance, and duration. Start/stop/resume session controls with unit toggle (mph/km/h).
Session History - Browse all completed and active tracking sessions with top-line stats. Each session card shows top speed, average speed, distance, and GPS point count.
Session Details - View detailed analytics for any session including a speed chart over time, comprehensive statistics, and recording metadata.
Data Persistence - All sessions, GPS points, and user unit preferences are stored in browser localStorage, so sessions survive app refreshes.
Mobile-Optimized UI - Fully responsive design with touch-friendly buttons (48px minimum), adaptive font sizes, optimized touch targets, and viewport settings for both iOS and Android. Headers scale intelligently and buttons stack on mobile while remaining side-by-side on desktop.
The app uses the native Geolocation API for accurate GPS tracking with high accuracy enabled. All speed conversions, distance calculations (Haversine formula), and statistics are computed in real-time. You can now visit the preview to test it!
You can send messages while the preview loads