Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to enhance the clustering of markers on a map, similar to the functionality found in WhatsApp when users are in close proximity. The primary goal is to provide users with a seamless and intuitive experience when interacting with map markers, ensuring that the interface remains clean, responsive, and visually appealing.

## CORE FEATURES
1. **Dynamic Marker Clustering**: Automatically groups nearby markers based on user location, adapting in real-time as users move or zoom in/out on the map.
2. **Interactive Map Controls**: Users can easily pan, zoom, and click on grouped markers to view detailed information, enhancing engagement and usability.
3. **Search Functionality**: Allows users to search for specific locations or markers, making navigation more efficient and user-friendly.
4. **User Location Tracking**: Offers an option for users to share their location, enabling better clustering and relevant marker display based on proximity.
5. **Customizable Marker Types**: Users can select different types of markers based on categories (e.g., restaurants, landmarks), allowing for a personalized mapping experience.
6. **Responsive Design**: Ensures that the application is fully functional across various devices, maintaining usability on mobile, tablet, and desktop screens.

## 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 top navigation bar, a central map area for displaying markers, and a sidebar for additional functionalities such as search and user settings.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project. Configure Tailwind CSS for styling.
3. **Create Components**: Develop core components including the Map, Marker, Navigation Bar, and Sidebar.
4. **Implement Marker Clustering**: Use a library like Leaflet or Google Maps API to manage map functionality and clustering logic.
5. **Add Search Functionality**: Implement a search bar in the sidebar that filters markers based on user input.
6. **Enable User Location Tracking**: Use the Geolocation API to track user location and update marker clustering dynamically.
7. **Test Responsiveness**: Ensure the application is fully responsive, adjusting layouts and components for different screen sizes.
8. **Deploy Application**: Use platforms like Vercel or Netlify for hosting the application.

## USER EXPERIENCE
Users will be greeted with a clean, minimalist interface that prioritizes ease of use. Upon entering the application, they can immediately see their location on the map. As they zoom in or out, markers will cluster automatically for better visibility. Users can interact with grouped markers to reveal more details or utilize the search bar to find specific locations quickly. The design ensures that all interactions are smooth and intuitive, providing a delightful mapping experience.