Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Develop a Progressive Web Application (PWA) that tracks user movement in real-time, calculates the distance walked, and converts it into step count. This app utilizes the Google Maps infrastructure for accuracy while implementing smart filtering to ensure only walking data is processed.

## CORE FEATURES
1. **Real-Time Location Tracking**: Utilize the HTML5 Geolocation API to capture user latitude, longitude, and speed in real-time.
2. **Distance Calculation**: Implement an algorithm to convert distance traveled into steps using the formula (Distance / 0.76m), ensuring accuracy.
3. **Speed Filtering**: Filter out data when the detected speed exceeds 7 km/h to disregard vehicle movement.
4. **Data Validation**: Use Google Roads API to align GPS data with actual roads and refine the distance measurement.
5. **Cost Management**: Implement local processing to minimize API calls, including a debounce mechanism to only send data if the user moves more than 50 meters.
6. **User Interface**: A clean and intuitive interface displaying the tracked distance, steps, and an interactive map showing the user's walking route.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on usability and clarity.
- **Color Mode**: Light theme with dark text on light backgrounds for high readability.
- **Layout**: 
  - A top navigation bar for easy access to settings and user profile.
  - A central display area showcasing the tracking metrics (distance, steps, speed).
  - A map section that visualizes the user's walking route.
- **Typography**: 
  - Primary font: Sans-serif (e.g., Inter or Roboto).
  - Font hierarchy: 
    - Headings: Bold, larger size for emphasis.
    - Body text: Regular weight for clarity.
    - Captions/notes: Smaller size for supplementary information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the application.
- **Styling**: Tailwind CSS for a responsive and utility-first approach to styling.
- **UI Components**: Use of shadcn/ui for modern, accessible UI components.
- **State Management**: React Context API or Zustand for managing application state.

## IMPLEMENTATION STEPS
1. **Set Up Environment**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it for the project.
   - Set up shadcn/ui components.

2. **Create Core Components**:
   - Develop the main App component for tracking logic.
   - Implement a Navigation component for user settings.
   - Create a MetricsDisplay component to show distance, steps, and speed.
   - Integrate a Map component using Google Maps API to display the walking route.

3. **Implement Geolocation and Filtering**:
   - Set up the HTML5 Geolocation API to capture position updates.
   - Write logic to filter speed and only process walking data.

4. **Integrate Google Maps API**:
   - Implement the Roads API to snap GPS coordinates to the nearest roads.
   - Handle API requests and responses to refine distance calculations.

5. **Develop Cost Management Features**:
   - Implement local distance calculation using the Haversine formula.
   - Set up debounce logic to minimize API calls based on user movement.

6. **Testing and Optimization**
   - Test the application across different devices and browsers for responsiveness and performance.
   - Optimize the application based on feedback and testing results.

## USER EXPERIENCE
Users will start the app and grant location permissions. The app will display real-time tracking metrics prominently. As users walk, the interface will show updates on distance and step count, while the map visualizes their walking route. Users can access settings through the navigation bar to adjust preferences, and the app will intelligently manage API calls to ensure efficient data processing without exceeding budget constraints. The clean design and responsive layout will provide an intuitive experience, encouraging users to engage with their walking activities.