Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a local coffee shop locator, utilizing Mapbox to display coffee shop locations on an interactive map. Users can filter coffee shops based on their ratings and proximity, enhancing their search for the perfect brew in their area.

## CORE FEATURES
1. **Interactive Map Integration**: Incorporates Mapbox to show coffee shop locations on a draggable map interface.
2. **Location Filtering**: Allows users to filter coffee shops by user ratings (1-5 stars) and distance (in miles or kilometers).
3. **Search Functionality**: Users can enter their current location or a specific address to find nearby coffee shops.
4. **Shop Details View**: When a user clicks on a coffee shop marker, a detail card appears, providing information such as shop name, rating, address, and a link to reviews.
5. **Favorites List**: Users can save their favorite coffee shops for quick access later.
6. **Responsive Design**: Optimized for various devices, ensuring a seamless experience on desktops, tablets, and smartphones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Emphasizes a minimalist approach with a clean and simple design. Utilizes ample white space to create an uncluttered interface, allowing users to focus on content.
- **Color Mode**: Adopts a light theme featuring dark text on light backgrounds to enhance readability and accessibility.
- **Layout**: The main layout includes a full-screen map as the backdrop, with a sidebar for filters and a results list. The sidebar contains collapsible sections for filtering, while the results list will appear below the map.
- **Typography**: Utilizes a sans-serif font like Inter for clarity and modernity. Headings will be bold and larger to establish a clear hierarchy, with body text set at a comfortable reading size.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component-based architecture.
- **Styling**: Tailwind CSS for rapid styling and responsive design capabilities.
- **UI Components**: Use shadcn/ui for modular and reusable component designs.
- **State Management**: Utilize React Context API for managing global state, especially for favorite coffee shops and user preferences.

## IMPLEMENTATION STEPS
1. **Set up the React application**: Initialize a new React project with TypeScript using Create React App.
2. **Install dependencies**: Add Mapbox, Tailwind CSS, and shadcn/ui.
3. **Create the Map Component**: Integrate Mapbox to render the map, setting up markers based on coffee shop locations.
4. **Implement Filtering Logic**: Create state variables for distance and rating filters. Implement event handlers to update the displayed coffee shops based on user selections.
5. **Build the Coffee Shop Details Component**: Create a modal or sidebar to display detailed information about each coffee shop when clicked.
6. **Develop the Favorites Feature**: Implement functionality to allow users to save and retrieve their favorite coffee shops, utilizing local storage or context for state management.
7. **Ensure Responsive Design**: Utilize Tailwind CSS to style the application, ensuring it looks great on all devices, from desktops to mobile phones.
8. **Testing**: Conduct thorough testing for usability, performance, and responsiveness across different devices and browsers.

## USER EXPERIENCE
Users will start by accessing the application, where they are greeted with a minimalist interface featuring an interactive map. They can easily input their location and apply filters for ratings and distance. As they interact with the map, they can click on coffee shop markers to view detailed information in an intuitive pop-up format. The ability to save favorites enhances user engagement, encouraging repeat visits. The overall experience is designed to be seamless, straightforward, and visually pleasing, keeping users focused on finding their next favorite coffee spot.