Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to enhance the user's experience by providing real-time animations for user markers on a map. The primary goal is to create a clean, minimalist interface where users can see their location dynamically represented on a map, improving usability and engagement.

## CORE FEATURES
1. **Real-Time Location Updates**: The application will track and display the user's location on a map, updating in real-time to reflect movement.
2. **Animated Markers**: Utilize smooth animations for the user marker to provide visual feedback as the location changes.
3. **Map Integration**: Integrate with a mapping service (like Google Maps or Mapbox) to provide a reliable and responsive map interface.
4. **User Interface Customizations**: Allow users to customize marker colors and animations for a personalized experience.
5. **Responsive Design**: Ensure the application is fully responsive, providing a seamless experience across all devices.
6. **Minimalist Design**: Focus on a clean layout that emphasizes the map and the user marker while minimizing distractions.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will feature a full-screen map with the user marker prominently displayed. A simple top navigation bar will include options for settings, customization, and help.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux as needed for managing location state and user preferences.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**:
    - Initialize a new React project with TypeScript.
    - Install Tailwind CSS and shadcn/ui for component styling.
  
2. **Integrate Mapping Library**:
    - Choose a mapping solution (e.g., Google Maps or Mapbox) and integrate it into the application.
  
3. **Create Map Component**:
    - Build a Map component that displays the user's location and updates it in real-time.
  
4. **Implement Marker Animation**:
    - Develop the animated user marker that smoothly transitions as the user's location changes.
  
5. **Add Customization Options**:
    - Create a settings panel where users can select marker colors and animation styles.
  
6. **Ensure Responsiveness**:
    - Test the application on various devices and screen sizes to ensure a smooth user experience.

## USER EXPERIENCE
The user will have a straightforward interaction with the application. Upon loading, the map will immediately display their current location with an animated marker. As they move, the marker will animate to reflect their position in real-time. Users will have easy access to customization options via a top navigation bar, allowing them to personalize their experience without cluttering the main interface. The minimalist design ensures that the focus remains on the map and the user's location, providing an intuitive and engaging user experience.