Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to display weather information for various cities. Users will be able to search for specific cities to get real-time weather updates, showcasing a minimalist interface that emphasizes user-friendliness and clarity.

## CORE FEATURES
1. **City Search**: Users can type in the name of a city to retrieve current weather data, including temperature, humidity, and conditions.
2. **Weather Forecast**: Displays a 5-day weather forecast for the selected city, giving users an overview of upcoming weather conditions.
3. **Favorite Cities**: Users can save their favorite cities for quick access to weather updates without needing to search each time.
4. **Current Location Weather**: Automatically detects and displays the weather for the user's current location if permission is granted.
5. **Responsive Design**: Ensures the application is usable on both desktop and mobile devices, adapting the layout accordingly.

## 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**: A single-page layout featuring a hero section at the top, followed by a search bar, weather display area, and a section for saved favorite cities.

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

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and required dependencies.
2. **Create Components**:
   - Build a `SearchBar` component for inputting city names.
   - Design a `WeatherDisplay` component to show current weather and forecast.
   - Implement a `Favorites` component for saved cities.
3. **Fetch Weather Data**: Use a weather API (e.g., OpenWeatherMap) to fetch weather data based on user input.
4. **State Management**: Implement state management to handle user searches, favorite cities, and weather data.
5. **Styling Components**: Apply Tailwind CSS classes to create a minimalist and responsive design.
6. **Testing**: Ensure the application is responsive and functions correctly on various devices, debugging any issues that arise.

## USER EXPERIENCE
Users will be greeted by a clean interface with a prominent search bar at the top. They can easily input a city name to receive immediate weather updates displayed in a clear format. The design prioritizes readability, with a consistent style for buttons and text that invites interaction. Users can save their favorite cities for quick access, enhancing their overall experience with the application.