Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide users with movie recommendations based on genre, complete with filtering and sorting capabilities. Users can search for specific movies to view detailed information and associated posters, creating a user-friendly way to explore cinematic options.

## CORE FEATURES
1. **Movie Search Functionality**: Users can type in movie titles to retrieve detailed data, including descriptions, ratings, and poster images.
2. **Genre Filtering**: Users can filter movie recommendations by genre, allowing for targeted browsing based on personal preferences.
3. **Sorting Options**: Users can sort the movie list based on criteria such as release date, rating, or alphabetical order to enhance discoverability.
4. **Dynamic Movie Posters**: Each movie entry will feature a visually appealing poster to enhance user engagement and provide a visual representation of the films.
5. **User-Friendly Interface**: The application will have an intuitive layout that facilitates easy navigation through the movie database.

## 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 will have a structured layout including a hero section for the search bar at the top, followed by a grid display of movie posters, filters on the left sidebar, and sorting options above the movie list.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux Toolkit (for managing application state, if necessary)

## IMPLEMENTATION STEPS
1. **Project Initialization**: Create a new React app using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and Redux Toolkit to the project.
3. **Set Up Global Styles**: Configure Tailwind CSS with a light theme and apply global styles using the Inter font.
4. **Create Components**: Develop components for the search bar, movie card, filters, and sorting options.
5. **Implement State Management**: Set up Redux Toolkit for state management, managing the list of movies, filters, and search results.
6. **API Integration**: Connect to a movie database API to fetch movie data, including titles, genres, ratings, and poster images.
7. **Implement Filtering and Sorting**: Develop functionality for filtering and sorting movies based on user input.
8. **Testing and Debugging**: Conduct thorough testing to ensure all features work correctly and the UI is responsive.

## USER EXPERIENCE
Users will begin their journey on the home page, where they can enter a movie name in the search bar prominently displayed at the top. As they type, suggestions may appear, enhancing user interaction. On selecting a genre from the filter sidebar, the movie list updates dynamically to reflect their choice, with clear sorting options available to tailor the results further. Each movie card will showcase the title and poster, inviting users to click for more detailed information. The overall layout will ensure a seamless and enjoyable browsing experience, with responsive design principles applied for optimal viewing across devices.