Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
Reel Tracker is a web application designed to provide analytics for Instagram Reels, allowing users to track and manage competitor profiles effectively. Users can add Instagram accounts, fetch reel data, and analyze engagement metrics in a clean, user-friendly interface.

## CORE FEATURES
1. **Manage Profiles**: Users can add or remove competitor Instagram accounts via a simple form. Profiles are stored in a database for easy access.
2. **Reel Tracker Dashboard**: Main interface for fetching reels, allowing users to select profiles, define date ranges, and retrieve reel data.
3. **Date Range Filter**: Flexible filtering options to view reels from specific time frames, including quick select buttons and custom date pickers.
4. **Results Display**: Engaging layout to present fetched reels, showing key metrics such as views, likes, comments, and an engagement score.
5. **CSV Export**: Functionality to download the displayed reel data as a CSV file for external analysis.
6. **Error Handling**: Robust system to manage API call failures and user input errors, ensuring a smooth user experience.

## 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 application features a sidebar or top navigation for easy access to "Manage Profiles" and "Reel Tracker" sections, with a responsive grid layout for displaying profiles and reels.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's context API or any preferred state management tool for managing user profiles and fetched data.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Configure Environment**: Set up Supabase for database management and store the Apify API token as an environment variable.
3. **Design UI Components**:
   - Create a sidebar or top navigation bar for "Manage Profiles" and "Reel Tracker."
   - Build form components for adding profiles and displaying results.
4. **Implement Profile Management**:
   - Create functionality to add, delete, and list Instagram profiles with Supabase integration.
   - Add confirmation toasts for user actions.
5. **Develop Reel Tracker Functionality**:
   - Implement multi-select checkboxes for profile selection.
   - Add date range filter with quick select and custom range options.
   - Create a fetch button that triggers the Apify API for selected profiles.
6. **Display Results**:
   - Format and display the fetched reels in a user-friendly manner, including collapsible sections for each creator.
   - Implement the export to CSV functionality.
7. **Error Handling**:
   - Ensure proper error messaging for failed API calls and validation for user inputs.

## USER EXPERIENCE
Users will interact with a clean interface where they can easily manage profiles and fetch reel data. The experience focuses on simplicity and clarity, ensuring users can navigate between managing profiles and analyzing reels without confusion. The application's responsive design will support various devices, providing a seamless experience across platforms.
```