PROJECT OVERVIEW:
The application, tentatively named 'FlightStatus: Real-time Airport Insights', aims to solve the problem of air travel uncertainty by providing users with real-time, aggregated, and easily digestible information about airport delays, cancellations, and overall status. The core value proposition is to reduce travel stress and improve planning for travelers by offering a centralized, intuitive platform that aggregates data from various sources, presenting it in a clear and actionable format. This is a Single Page Application (SPA) designed for both web and mobile responsiveness.
TECH STACK:
- Frontend Framework: React.js (using Create React App or Vite for setup)
- Styling: Tailwind CSS for rapid UI development and a utility-first approach.
- State Management: Zustand for efficient and straightforward global state management.
- Routing: React Router DOM for handling navigation within the SPA.
- Data Fetching: Axios for making HTTP requests to potential future API endpoints, or directly using mock data for MVP.
- Icons: React Icons library for a variety of icons.
- Deployment: Netlify or Vercel for easy deployment.
CORE FEATURES:
1. **Airport Search & Selection:**
* User Flow: Upon landing on the page, the user sees a prominent search bar. Typing in an airport name (city or IATA code) triggers an auto-suggest dropdown. Selecting an airport from the dropdown or pressing Enter navigates the user to the details view for that airport.
* Details: Auto-suggest should be fast and handle partial matches. Search functionality should be case-insensitive.
2. **Real-time Airport Dashboard (MVP Focus):**
* User Flow: After selecting an airport, the user is presented with a dashboard displaying key metrics. The MVP focuses on data presented in the Hacker News post.
* Details:
* Display Airport Name, City, IATA Code.
* **Departures:** Show "Departures" with current delays (e.g., '3h 34m').
* **Arrivals:** Show "Arrivals" with current delays (e.g., '2h 13m').
* **Delay Percentage:** Display percentage of delayed flights (e.g., '6%').
* **Cancellation Percentage:** Display percentage of cancelled flights (e.g., '13%').
* **Alerts/Status:** Indicate significant issues like 'High Cancellations', 'Ground Delay'. This should be visually distinct.
* The data should be presented in a tabular or card-based format for clarity. For MVP, this data will be mock data, simulating real-time updates.
3. **Favorites Management:**
* User Flow: On the airport details page, a star or bookmark icon allows the user to add/remove the airport to/from their favorites. A dedicated 'Favorites' section or page lists all saved airports for quick access.
* Details: Favorites are stored in `localStorage` for persistence across sessions without requiring user accounts.
4. **Responsive Design:**
* User Flow: The application interface adapts seamlessly to various screen sizes, from large desktop monitors to small mobile phones.
* Details: Use Tailwind CSS's responsive modifiers (e.g., `md:`, `lg:`) to adjust layout, typography, and spacing.
UI/UX DESIGN:
- **Layout:** Single page application. A clear header containing the app title, search bar, and potentially a favorites icon. The main content area will display the airport search/list or the detailed airport dashboard. Footer with basic links (About, Contact - optional for MVP).
- **Color Palette:** Primary: A calming blue (e.g., `#4A90E2`) for main elements and links. Secondary: A neutral gray (e.g., `#F5F5F5` for backgrounds, `#CCCCCC` for borders). Accent: A warning orange/red (e.g., `#F87171`) for alerts and high-priority issues. Text: Dark gray/black (`#333333`).
- **Typography:** Clean, readable sans-serif font like Inter or Roboto. Use varying font weights and sizes for hierarchy (e.g., H1 for titles, H2 for sections, standard body text).
- **Component Structure:** Use a clear, modular approach with distinct components for Header, SearchBar, AirportCard, AirportDetail, FavoriteButton, etc.
- **Responsiveness:** Mobile-first approach. Ensure key information is visible on small screens without excessive horizontal scrolling. Utilize grids and flexbox effectively.
DATA MODEL:
- **`Airport` Object:**
```json
{
"id": "string", // Unique identifier (e.g., 'KSEA')
"name": "string", // e.g., "Seattle-Tacoma International Airport"
"city": "string", // e.g., "Seattle"
"iata": "string", // e.g., "SEA"
"status": "string", // e.g., "On Time", "Delayed", "Cancelled", "Ground Delay"
"departureDelay": {
"duration": "string", // e.g., "2h 15m" or null
"percentage": "number" // e.g., 15.5
},
"arrivalDelay": {
"duration": "string", // e.g., "30m" or null
"percentage": "number" // e.g., 5.2
},
"cancellationRate": "number", // e.g., 8.1
"groundDelay": "boolean" // true if ground delay is active
}
```
- **State Management (`Zustand`):**
* `airports`: Array of `Airport` objects (fetched or mock).
* `selectedAirport`: The currently viewed `Airport` object or null.
* `searchTerm`: String for the search input.
* `searchResults`: Array of `Airport` objects matching `searchTerm`.
* `favorites`: Array of IATA codes (strings) of favorite airports.
* `loading`: Boolean, true when data is being fetched.
* `error`: String or null, for displaying error messages.
- **Mock Data Strategy:** For MVP, populate the `airports` state with a predefined array of mock `Airport` objects based on the Hacker News post. Simulate updates by occasionally changing values in a timer-based function (optional for initial MVP, focus on static display first).
COMPONENT BREAKDOWN:
- **`App.js`:** Main component, sets up routing and global layout.
- **`Header.js`:** Contains the app title and navigation elements.
- **`SearchBar.js`:** Input field for searching airports. Manages `searchTerm` state and triggers search.
* Props: `onSearchChange`, `onSearchSubmit`.
- **`AirportSearchList.js`:** Displays the list of airports based on search results or a default view. Renders `AirportCard` components.
* Props: `airports`, `onAirportSelect`.
- **`AirportCard.js`:** Displays summary information for a single airport in a list view.
* Props: `airport`, `onClick`, `isFavorite`, `onToggleFavorite`.
- **`AirportDetailView.js`:** Displays the detailed information for a selected airport.
* Props: `airport`, `isLoading`, `error`.
- **`FavoriteButton.js`:** Icon button to add/remove an airport from favorites.
* Props: `isFavorite`, `onClick`.
- **`StatusIndicator.js`:** Component to display alerts or status messages (e.g., 'High Cancellations').
* Props: `status`, `type` (e.g., 'warning', 'info').
- **`LoadingSpinner.js`:** Displays a visual indicator when data is loading.
- **`ErrorMessage.js`:** Displays error messages to the user.
ANIMATIONS & INTERACTIONS:
- **Search Input:** Subtle focus ring animation when the search bar is active.
- **Airport Cards:** Slight hover effect (e.g., subtle background color change or shadow lift) on `AirportCard` when hovered.
- **Transitions:** Smooth transitions for showing/hiding elements, like search results appearing or favorite toggles.
- **Loading States:** Use `LoadingSpinner` components to indicate data fetching. Shimmer effect placeholders could be considered for a more advanced UX.
- **Micro-interactions:** Visual feedback when adding/removing a favorite (e.g., star icon fills/empties with a subtle animation).
EDGE CASES:
- **No Search Results:** Display a clear message like "No airports found matching your search criteria."
- **Empty State (Initial Load):** Show a placeholder UI or a welcome message with instructions on how to search.
- **Error Handling:** Gracefully handle API errors (if implemented) or data loading issues. Display user-friendly error messages using `ErrorMessage`.
- **Data Not Available:** If specific data points (e.g., departure delay) are missing for an airport, display a placeholder like '-' or 'N/A' instead of 0 or an error.
- **Accessibility (a11y):** Ensure proper ARIA attributes, semantic HTML, keyboard navigation, and sufficient color contrast. Focus management is crucial, especially in search and interactive elements.
- **Offline Support (Future):** Consider caching data using Service Workers for basic offline viewing.
SAMPLE DATA:
(Mock data simulating the Hacker News post structure)
```json
[
{
"id": "YYC",
"name": "Calgary International Airport",
"city": "Calgary",
"iata": "YYC",
"status": "Delayed",
"departureDelay": {
"duration": "3h 34m",
"percentage": 6.0
},
"arrivalDelay": {
"duration": "2h 13m",
"percentage": 13.0
},
"cancellationRate": 13.0,
"groundDelay": false
},
{
"id": "LGA",
"name": "LaGuardia Airport",
"city": "New York",
"iata": "LGA",
"status": "Delayed",
"departureDelay": {
"duration": "1h 58m",
"percentage": 17.0
},
"arrivalDelay": {
"duration": "1h 54m",
"percentage": 19.0
},
"cancellationRate": 16.0,
"groundDelay": false
},
{
"id": "FLL",
"name": "Fort Lauderdale-Hollywood International Airport",
"city": "Fort Lauderdale",
"iata": "FLL",
"status": "Delayed",
"departureDelay": {
"duration": "1h 1m",
"percentage": 7.0
},
"arrivalDelay": {
"duration": "11m",
"percentage": 61.0
},
"cancellationRate": 0.0,
"groundDelay": false
},
{
"id": "YEG",
"name": "Edmonton International Airport",
"city": "Edmonton",
"iata": "YEG",
"status": "Delayed",
"departureDelay": {
"duration": "34m",
"percentage": 33.0
},
"arrivalDelay": {
"duration": "1h 46m",
"percentage": 40.0
},
"cancellationRate": 0.0,
"groundDelay": false
},
{
"id": "PHL",
"name": "Philadelphia International Airport",
"city": "Philadelphia",
"iata": "PHL",
"status": "Delayed",
"departureDelay": {
"duration": "1h 0m",
"percentage": 50.0
},
"arrivalDelay": {
"duration": "10m",
"percentage": 71.0
},
"cancellationRate": 14.0,
"groundDelay": false
}
// ... (Add more sample data based on the provided list)
]
```
DEPLOYMENT NOTES:
- **Build:** Use the standard build command for your chosen framework (e.g., `npm run build` for Vite/CRA). Ensure the output is configured for a static site.
- **Environment Variables:** If an API is integrated later, use environment variables (e.g., `REACT_APP_API_URL` or `VITE_API_URL`) for API keys and base URLs. These should be set in the deployment platform's settings.
- **Performance Optimizations:**
* Code Splitting: Implement route-based or component-based code splitting to reduce initial load time.
* Image Optimization: If images are used, optimize them for web use.
* Lazy Loading: Lazy load components that are not immediately needed.
* Memoization: Use `React.memo` or `useMemo`/`useCallback` where appropriate to prevent unnecessary re-renders.
- **HTTPS:** Ensure the deployment platform serves the application over HTTPS.