Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
ViewVault is a modern, responsive web application designed for film and series tracking, integrating with The Movie Database (TMDB) API. The platform allows users to manage their personal viewing lists, track their progress, and visualize their viewing statistics in an engaging and intuitive interface.

## CORE FEATURES
1. **Personal Library Management**: Users can create multiple status categories (To Watch, Watching, Completed) for films and series, allowing easy tracking of their viewing habits.
2. **Advanced Search Functionality**: A powerful search bar that enables users to find films, series, and cast members, displaying relevant information and quick actions.
3. **Detailed Film and Series Pages**: Comprehensive detail pages for each film and series, featuring visuals, cast information, and personalized tracking options.
4. **Season and Episode Management**: Users can view and manage seasons and episodes for series, marking them as watched and tracking overall progress.
5. **Personal Dashboard**: An engaging homepage that summarizes the user's library, showing ongoing series, recently added content, and personalized recommendations.
6. **Statistics Visualization**: A dedicated section displaying viewing statistics, including total films watched, time spent, and genre preferences, using elegant graphs and cards.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on usability and readability.
- **Color Mode**: Light theme with dark text on light backgrounds for a modern and friendly user experience.
- **Layout**: Responsive grid layout for content cards, with a sidebar for navigation on desktop and a bottom navigation for mobile devices. Each detail page features a large backdrop image and a clear hierarchy of information.
- **Typography**: Use of a legible sans-serif font with a clear hierarchy to distinguish headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainable code.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid UI development and consistent design.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components.
- **State Management**: Implement React Context or Zustand for managing application state efficiently.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a new React project using Create React App with TypeScript.
2. **Integrate Tailwind CSS**: Configure Tailwind CSS for the project, ensuring responsive design principles are followed.
3. **API Integration**: Set up API calls to TMDB, including endpoints for searching films and retrieving details.
4. **Develop Core Features**:
   - Implement the personal library management system with statuses.
   - Build the advanced search functionality with filtering capabilities.
   - Create detailed pages for films and series with the necessary components.
   - Develop the season and episode management interface.
5. **Design the Dashboard**: Create the homepage dashboard that summarizes user activity and tracks viewing progress.
6. **Statistics Module**: Implement a statistics section with data visualization components.
7. **User Authentication**: Set up user authentication to allow personalized experiences and list management.
8. **Testing and Optimization**: Conduct user testing for feedback and optimize performance for mobile and desktop environments.

## USER EXPERIENCE
The user experience should prioritize simplicity and efficiency. Users can swiftly add films and series to their library, change statuses with one click, and easily navigate through their dashboard. Each interaction, such as marking episodes as watched, should feel intuitive and responsive, with animations enhancing the overall experience. The application should maintain a high level of readability and accessibility, ensuring users can enjoy a seamless tracking experience across devices.