Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed for movie and series enthusiasts to discover, track, and manage their viewing preferences. Users can explore a curated library of films and TV shows, create personalized watchlists, and receive recommendations based on their viewing history.

## CORE FEATURES
1. **Search Functionality**: Users can search for movies and series using a simple search bar, filtering results by genre, release year, and ratings.
2. **Watchlist Management**: Users can easily add or remove titles from their watchlist, allowing them to keep track of what they want to watch next.
3. **Personalized Recommendations**: The app analyzes user preferences and viewing history to suggest new movies and series tailored to individual tastes.
4. **Detailed Movie/Series Pages**: Each title will have its own page featuring a synopsis, cast information, trailers, and user reviews.
5. **User Accounts**: Users can create accounts to save their watchlists and preferences, enabling a personalized experience across devices.
6. **Rating and Review System**: Users can rate titles and leave reviews, contributing to a community-driven experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design emphasizing clean lines and a simple interface. The use of white space will enhance readability and focus on content.
- **Color Mode**: A light theme with dark text on light backgrounds to provide a bright and inviting user experience.
- **Layout**: A grid layout for the homepage showcasing featured movies and series, with a sidebar navigation for easy access to various sections including the watchlist and user account settings.
- **Typography**: Utilize a sans-serif font like "Montserrat" for headings and "Roboto" for body text. Headings will be bold to establish a clear hierarchy, while body text will maintain a standard weight for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling and rapid UI development.
- **UI Components**: Use shadcn/ui for pre-built components that adhere to the minimalist aesthetic.
- **State Management**: Implement React Context API or Zustand for managing global state effectively.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Main Components**: Develop core components including `Header`, `Footer`, `MovieCard`, `SearchBar`, and `Watchlist`.
4. **Implement Routing**: Utilize React Router for navigation between different pages (Home, Watchlist, Movie Details).
5. **Develop API Integration**: Connect to a movie database API to fetch film and series data for search and recommendations.
6. **State Management Setup**: Implement global state for the watchlist and user preferences using the chosen state management approach.
7. **Design Layout**: Apply Tailwind CSS classes to create a responsive layout that adapts to different screen sizes.
8. **User Accounts Functionality**: Set up authentication (e.g., using Firebase or Auth0) to manage user accounts and preferences.
9. **Testing**: Conduct user testing to ensure a seamless experience and address any usability issues.
10. **Deployment**: Deploy the application on a suitable platform (e.g., Vercel or Netlify) for public access.

## USER EXPERIENCE
Users will experience a straightforward and engaging journey from landing on the homepage to exploring their favorite films and series. The intuitive search functionality allows for quick title discovery, while the watchlist feature keeps users organized. Personalized recommendations will enhance user engagement, leading to a richer content exploration experience. The overall minimalist design will ensure that users can navigate effortlessly, with a strong focus on the content itself.