Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Weather Forecast### ###  Web App is a minimalist mobile application designed to provide users with accurate and timely weather information. The app focuses on delivering a clean and user-friendly interface, allowing users to quickly view current conditions, forecasts, and additional weather details without unnecessary distractions.

## CORE FEATURES
1. **Current Weather Display**: Show real-time weather conditions, including temperature, humidity, wind speed, and icon representation of the current weather status.
2. **7-Day Forecast**: Provide a detailed 7-day weather forecast with high/low temperatures and icons for each day, enabling users to plan ahead.
3. **Location Search**: Allow users to search for weather information by city or geographic location, enhancing accessibility to local weather data.
4. **Favorites List**: Enable users to save their favorite locations for quick access to weather updates without repeated searches.
5. **Hourly Forecast**: Display an hourly breakdown of weather conditions for the next 12 hours, including temperature and precipitation predictions.
6. **User Settings**: Provide options for users to customize units (Celsius/Fahrenheit) and notification preferences for weather alerts.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean lines, abundant white space, and an emphasis on typography for easy readability.
- **Color Mode**: Light theme featuring a soft white background with dark text for high contrast and readability.
- **Layout**: The main layout will consist of a top navigation bar for search functionality, a central area displaying current weather conditions, and a segmented section below for the 7-day forecast, with each day represented in a card format.
- **Typography**: Use a modern sans-serif font like "Roboto" for body text and "Montserrat" for headers. Establish a clear hierarchy with larger, bold headers and smaller body text for detail.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface and managing state.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design and responsive adjustments.
- **UI Components**: Utilize shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: Use React Context API or Zustand for managing global state without unnecessary complexity.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project, along with any necessary libraries for state management.
3. **Create Component Structure**: Establish a folder structure for components (e.g., `components/CurrentWeather`, `components/Forecast`, `components/Search`, etc.).
4. **Build UI Components**: Design and implement each core feature as a separate component using Tailwind CSS for styling.
5. **Implement State Management**: Set up global state management for user location and preferences using React Context or Zustand.
6. **API Integration**: Connect to a weather API (e.g., OpenWeatherMap) to fetch current weather and forecast data based on user input.
7. **Responsive Design**: Ensure all components are responsive and function well on various mobile devices and screen sizes.
8. **Testing**: Conduct unit and integration tests to ensure functionality across all features and correct any bugs.

## USER EXPERIENCE
Users will experience an intuitive interface where they can easily navigate between features. Upon opening the app, they will see the current weather conditions prominently displayed. Users can search for a location using the search bar at the top, and after entering a city, they can quickly add it to their favorites. The app will provide seamless transitions between hourly and 7-day forecasts, ensuring that users have a smooth and enjoyable experience throughout their interactions.