Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a weather app that provides users with real-time weather updates, forecasts, and alerts. The app aims to deliver a clean and intuitive interface, allowing users to easily access weather information for their preferred locations.

## CORE FEATURES
1. **Current Weather Display**: Shows current temperature, weather conditions (sunny, rainy, etc.), humidity, and wind speed for the user's selected location.
2. **7-Day Forecast**: Provides a detailed 7-day weather forecast, including high and low temperatures, and precipitation chances.
3. **Location Search**: Allows users to search for weather information by city name or zip code.
4. **Weather Alerts**: Sends notifications for severe weather alerts based on the user's location.
5. **Unit Preference**: Users can switch between Celsius and Fahrenheit for temperature displays.
6. **Saved Locations**: Users can save multiple locations for quick access to weather updates.

## 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, a search bar for location input, a main content area displaying current weather and forecast, and a footer with additional links and information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Redux (if needed for complex state)

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Basic Layout**: Build the main layout structure using Flexbox and Tailwind CSS classes for a responsive design.
3. **Implement Weather API Integration**: Choose a weather API (e.g., OpenWeatherMap) and set up API calls to fetch current weather and forecasts.
4. **Develop Core Features**:
   - Implement the current weather display component.
   - Create a forecast component for the 7-day weather.
   - Set up the location search functionality.
   - Implement notifications for weather alerts.
5. **Add User Preferences**: Allow users to select temperature units and save favorite locations.
6. **Testing and Debugging**: Conduct thorough testing for responsiveness and functionality across different devices and browsers.
7. **Deployment**: Deploy the application on a suitable platform (e.g., Vercel, Netlify).

## USER EXPERIENCE
Users will have a seamless interaction with the app, starting from the landing page featuring a prominent search bar. They can easily input a location and receive immediate weather updates. The interface will maintain clarity with a minimalist design, allowing users to navigate smoothly between different sections, such as viewing the 7-day forecast and accessing saved locations. Notifications for severe weather alerts will be prominently displayed to ensure users stay informed.