Lovable Prompt Creator - AI Prompt Generator

> > ## APPLICATION OVERVIEW
The project is a web application designed to provide real-time weather information for multiple cities across India. Users can easily search for their desired city and view current weather conditions, forecasts, and other relevant data in a clean and minimalist interface.

## CORE FEATURES
1. **City Search**: Users can input a city name to fetch current weather data, including temperature, humidity, and other conditions.
2. **Weather Forecast**: Display a 7-day weather forecast for the selected city, providing users with a detailed view of upcoming weather patterns.
3. **Multiple Cities**: Allow users to switch between different cities seamlessly, enabling them to compare weather conditions across locations.
4. **Current Conditions**: Show real-time weather updates, including temperature, wind speed, and precipitation for the selected city.
5. **User Preferences**: Enable users to save their favorite cities for quick access, enhancing the overall user experience.
6. **Responsive Design**: Ensure that the application is fully responsive, providing an optimal experience on both desktop and mobile devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design focused on a clean and simple aesthetic, utilizing ample white space to enhance readability and user navigation.
- **Color Mode**: Light theme featuring dark text on light backgrounds for high contrast and easy readability.
- **Layout**: The main layout will feature a centered search bar at the top, followed by a weather card showcasing current conditions, and a section below for the 7-day forecast. The favorite cities can be displayed in a sidebar or a dropdown menu for easy access.
- **Typography**: Use a modern sans-serif font such as 'Roboto' or 'Open Sans' for body text, with a larger, bold font for headings to establish a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components
- **State Management**: Consider using React's Context API for state management of user preferences and city data.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Build the main components including SearchBar, WeatherCard, and ForecastList.
3. **Fetch Weather Data**: Integrate a weather API (such as OpenWeatherMap) to fetch real-time weather data based on user input.
4. **Implement State Management**: Use Context API to manage the state for user-selected cities and favorite cities.
5. **Style Components**: Apply Tailwind CSS classes to style components according to the minimalist design specifications.
6. **Ensure Responsiveness**: Test and refine the layout for optimal performance on various screen sizes.
7. **Deploy Application**: Prepare the application for deployment using a platform like Vercel or Netlify.

## USER EXPERIENCE
Users will interact with a straightforward interface that emphasizes simplicity. They will start by entering a city in the search bar, resulting in dynamic weather updates displayed in the WeatherCard. Users can switch between cities easily, view detailed forecasts, and save their favorite cities for quicker access. The responsive design ensures a seamless experience on any device, making it easy for users to stay informed about the weather wherever they are.