Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will provide users with real-time flight information by integrating data from FlightRadar using n8n via a webhook. The application will present a clean and minimalist interface for users to easily access and view flight details, ensuring an intuitive experience.

## CORE FEATURES
1. **Real-Time Flight Display**: Show real-time flight data, including departure and arrival times, flight status, and aircraft details.
2. **Search Functionality**: Allow users to search for specific flights by flight number or route.
3. **Map Integration**: Display a live map showing the locations of flights in real-time with markers and details on hover.
4. **Notifications**: Provide users with alerts for flight status changes or delays via email or push notifications.
5. **User Preferences**: Enable users to save their favorite flights or routes for quick access.
6. **Responsive Design**: Ensure the application works seamlessly across devices, from desktops to mobile phones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will focus on a clean and simple aesthetic with ample white space, ensuring that users can easily navigate and find information without distraction.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and provide a modern look.
- **Layout**: A single-page layout with a top navigation bar, followed by a hero section displaying live flight information, a search bar, and an interactive map section. The bottom will include user preferences and notification settings.
- **Typography**: Use sans-serif fonts for a modern feel, with a clear hierarchy (e.g., headings in bold, larger sizes for primary information, and regular weight for secondary details).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong typing and component-based architecture.
- **Styling**: Tailwind CSS for rapid UI development and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: React's built-in state management with Context API or a lightweight library if needed for more complex state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for UI components.
2. **Create Components**: Build the main components: Header, Flight Display, Search Bar, Map, and Notification Settings.
3. **Integrate n8n Webhook**: Configure the n8n webhook to receive and send flight data, then set up API calls in the application to fetch real-time data.
4. **Implement State Management**: Use React's Context API to manage global state for user preferences and flight data.
5. **Responsive Design**: Ensure all components are styled using Tailwind CSS to be responsive and user-friendly on various devices.
6. **Testing**: Conduct thorough testing to ensure real-time data updates and responsiveness work as intended across different browsers and devices.

## USER EXPERIENCE
Users will enter the application and be greeted with a hero section displaying the most relevant real-time flight information. They can quickly search for specific flights or view a map that provides a visual representation of flight locations. Users will be able to set preferences for notifications and save their favorite flights, enhancing their overall experience and making it easy to track flights of interest. The minimalist design ensures that users are not overwhelmed and can focus on the data presented.