Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to provide weather forecasts for multiple cities. Users can easily search for cities and view current weather conditions, forecasts, and relevant weather data in a clean, user-friendly interface. The application aims to deliver accurate weather information while maintaining a minimalist design approach.

## CORE FEATURES
1. **City Search**: Users can input the name of a city to retrieve the current weather and forecast information.
2. **Current Weather Display**: Show current temperature, humidity, wind speed, and condition (sunny, rainy, etc.) for the selected city.
3. **7-Day Forecast**: Provide a detailed 7-day weather forecast for the searched city, including daily high and low temperatures.
4. **Favorite Cities**: Users can save their favorite cities for quick access to their weather information.
5. **Responsive Design**: Ensure the application is fully responsive and works well on both desktop and mobile devices.
6. **User Location**: Option to fetch and display weather data based on the user's current location.

## 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 for the city search, a main content area to display current weather and forecasts, and a sidebar for favorite cities.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context or Zustand for state management of weather data and favorite cities.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Component Structure**: Set up the folder structure for components, including `SearchBar`, `WeatherDisplay`, `Forecast`, and `Favorites`.
4. **Implement City Search Functionality**: Create a search bar component that allows users to input a city name and fetch weather data from a weather API (e.g., OpenWeatherMap).
5. **Display Current Weather**: Build the WeatherDisplay component to show current weather data.
6. **Implement 7-Day Forecast**: Create a Forecast component that pulls and formats the forecast data for the next seven days.
7. **Favorite Cities Feature**: Implement functionality to save and retrieve favorite cities using local storage or a state management solution.
8. **Responsive Design**: Use Tailwind CSS classes to ensure all components are responsive.
9. **Testing**: Conduct thorough testing to ensure all features work as expected, including checking responsiveness on various devices.
10. **Deployment**: Deploy the application to a hosting platform like Vercel or Netlify.

## USER EXPERIENCE
Users will have a seamless experience starting from the moment they land on the application. They can easily search for a city using the search bar, which will dynamically fetch weather data and update the display. Users can click to view a detailed 7-day forecast or save their favorite cities for quick access later. The overall workflow is intuitive, providing clear feedback and maintaining a clean interface throughout the interaction. The application will adapt beautifully to different screen sizes, ensuring usability across all devices.