Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a weather forecast app designed to provide users with real-time weather information for various cities. The app aims to deliver a clean and user-friendly interface that allows users to easily search for and view weather forecasts, ensuring they can make informed decisions based on current and upcoming weather conditions.

## CORE FEATURES
1. **City Search**: Users can input the name of a city to retrieve current weather data including temperature, humidity, and conditions (e.g., sunny, rainy).
2. **Weather Forecast**: Display a 7-day weather forecast for selected cities with detailed daily summaries.
3. **Location Detection**: Automatically detect the user’s location and display the weather for their current city.
4. **Favorites List**: Allow users to save their favorite cities for quick access to their weather forecasts.
5. **Responsive Design**: Ensure the app is fully responsive, providing an optimal viewing experience on both desktop and mobile devices.
6. **Minimalist UI**: Focus on a clean and simple interface with clear typography and a limited color palette.

## 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 header with the app title and search bar, followed by a main content area displaying current weather and forecast cards, and a footer with links to additional information or a contact page.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Use React's Context API for managing global state related to weather data and user preferences.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project using TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Build the necessary components such as Header, SearchBar, WeatherCard, and Footer.
3. **API Integration**: Integrate a weather API (e.g., OpenWeatherMap) to fetch real-time weather data based on user input and location.
4. **State Management**: Implement Context API to manage weather data and user preferences (favorites).
5. **Styling**: Apply Tailwind CSS classes to each component to ensure a consistent minimalist design.
6. **Responsive Design**: Use media queries and flexible layouts to ensure the app looks great on all devices.
7. **Testing**: Conduct thorough testing to ensure all features work as intended and the user experience is seamless.

## USER EXPERIENCE
Users will interact with the app by entering a city name in the search bar to retrieve current weather data. They will see a visually appealing display of current conditions and a detailed 7-day forecast. Users can save favorite cities by clicking a star icon, ensuring quick access to their preferred forecasts. The app will be designed to load quickly and respond smoothly to user inputs, providing a satisfying experience whether they are on a desktop or mobile device.