Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a minimalist weather checker that allows users to view the current weather by selecting their city. Upon entering a city name and clicking a button, the app makes a call to the OpenWeatherMap API to retrieve and display the weather data in a simple and user-friendly format.

## CORE FEATURES
1. **City Selector**: A user-friendly input field where users can type in their city name to retrieve weather information.
2. **Weather Display**: After submitting the city, the application shows current weather conditions, including temperature, humidity, and weather description.
3. **API Integration**: Seamless integration with the OpenWeatherMap API to fetch live weather data based on user input.
4. **Minimalist Design**: A clean interface with ample white space, ensuring that the focus remains on the weather information.
5. **Responsive Layout**: The application will be fully responsive, providing a great user experience across devices, from desktops to mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will be clean and simple, emphasizing functionality with plenty of white space and a limited color palette.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a pleasant aesthetic.
- **Layout**: 
  - A centered input field for city selection at the top of the page.
  - Below the input, a prominent button to submit the city name.
  - Weather data displayed in a clear, large font underneath the button.
- **Typography**: Use modern sans-serif fonts like "Roboto" or "Helvetica Neue" for clarity and readability, with a hierarchy that highlights the weather information prominently.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and type-safe development experience.
- **Styling**: Tailwind CSS for a utility-first approach, enhancing the minimalist design.
- **UI Components**: Utilize shadcn/ui for interactive components like buttons and inputs.
- **State Management**: Use React's built-in state management (useState and useEffect hooks) to handle API responses and user input.

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the City Selector Component**:
   - Build a functional component with an input field and a button.
   - Style it using Tailwind CSS for a minimalist look.
3. **Fetch Weather Data**:
   - Implement the API call to OpenWeatherMap inside the button's onClick handler.
   - Use the provided API key securely in the environment variables.
4. **Display Weather Information**:
   - Create a component that displays the fetched weather data.
   - Ensure it updates dynamically based on user input.
5. **Make the Layout Responsive**:
   - Use Tailwind CSS classes to ensure the application looks good on different screen sizes.
6. **Testing**: Test the application for bugs and ensure it works correctly across all devices.

## USER EXPERIENCE
Users will land on a simple, uncluttered interface where they can easily enter their city name. After clicking the submit button, the application will fetch and display the weather information without any distractions. The minimalist design will ensure that the focus remains on the weather data, providing a clean and efficient user experience. Responsive design will ensure a seamless transition between desktop and mobile views, maintaining usability across all devices.