Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to compare GDPs between countries, allowing users to select multiple countries for comparison through interactive charts. Users can analyze GDP growth over time, view significant historical events, and make predictions for future GDPs. The application will also provide a table listing countries by GDP for any selected year.

## CORE FEATURES
1. **Country Selection**: Users can select multiple countries from a dropdown list for GDP comparison.
2. **GDP Comparison Charts**: Interactive charts displaying GDP growth over time for selected countries, highlighting significant historical events.
3. **Future GDP Predictions**: A feature that predicts future GDPs based on historical data and trends.
4. **Sorted GDP Table**: A table that displays countries sorted by GDP for any selected year, with options for filtering and sorting.
5. **Data Insights**: Provides insights and analysis based on the selected data, helping users understand the economic landscape.

## 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 top navigation bar, a hero section for user engagement, followed by sections for charts, the GDP table, and insights. Each section will be clearly defined with ample spacing to ensure clarity and ease of use.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React application using Create React App with TypeScript, and install Tailwind CSS.
2. **Install Dependencies**: Add necessary packages, including shadcn/ui for UI components and any additional libraries for charting (e.g., Chart.js or D3.js).
3. **Create Core Components**:
   - Develop the country selection component with a multi-select dropdown.
   - Build chart components for GDP comparison and future predictions.
   - Implement the sorted GDP table component.
4. **Design Layout**: Apply Tailwind CSS to structure the layout according to the design specifications, ensuring responsiveness across devices.
5. **Implement State Management**: Set up Redux or Context API to manage the state for selected countries and data.
6. **Integrate Data Sources**: Connect to an API or database to fetch GDP data and historical events.
7. **Testing**: Perform unit tests and user testing to ensure functionality and usability.
8. **Deploy**: Deploy the application on a hosting platform (e.g., Vercel or Netlify) and ensure all features are functioning correctly.

## USER EXPERIENCE
Users will start at the hero section, where they can easily select countries to compare. Upon selection, they will be presented with interactive charts that illustrate GDP growth and forecasts. The sorted GDP table will allow users to quickly find and compare countries by GDP for any year. Insights will provide additional context, enhancing the educational aspect of the application. The overall experience will be smooth, with clear navigation and minimal distractions, focusing on the data and user interaction.