Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to help users find the lowest supermarket product prices within a specified locality in Spain, starting with Catalonia. Users can input their location to receive real-time pricing information from various supermarkets, enabling them to make informed purchasing decisions.

## CORE FEATURES
1. **Location Input**: Users can enter their locality to initiate a search for the lowest prices available in nearby supermarkets.
2. **Price Comparison**: The app displays a list of products along with their prices from different supermarkets, allowing users to compare easily.
3. **Favorites List**: Users can save their favorite products and supermarkets for quick access later.
4. **User Authentication**: Secure login and registration system to personalize user experience and save preferences.
5. **Notifications**: Users receive alerts for price drops on their favorite products or special offers in local supermarkets.
6. **Map Integration**: Visual representation of nearby supermarkets on a map, showing their locations and product availability.

## 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 search input area, followed by a results section that displays price comparisons in a card format, and a footer with contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux or Context API for managing user authentication and product data.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Build Authentication System**: Implement user authentication with registration and login functionality using Firebase or a similar service.
3. **Create Main Components**: Develop the main components including the search bar, results display, and favorites list.
4. **Integrate Price Comparison API**: Connect to an API that provides supermarket product pricing data based on user location.
5. **Implement Map Functionality**: Use a mapping library (e.g., Google Maps API) to display supermarket locations.
6. **Design UI Elements**: Apply Tailwind CSS styles to ensure a minimalist look, utilizing the specified typography and colors.
7. **Testing**: Conduct thorough testing for usability and responsiveness across different devices.
8. **Deployment**: Deploy the application using a platform like Vercel or Netlify.

## USER EXPERIENCE
Users will begin by landing on a clean interface with a prominent search bar to input their locality. Upon entering their location, they will see a list of products along with the lowest prices available nearby. Users can click on products to view more details, add items to their favorites, or set notifications for price changes. The map feature will provide a visual context for the nearby supermarkets, enhancing the overall user experience. The application will be responsive, ensuring usability across various devices.