You are building a production-ready web application for a personal movie-tracking site.
Generated Prompt
```markdown ## APPLICATION OVERVIEW The project is a full-stack web application designed for personal movie tracking. Users can record their movie history, browse current theatrical releases, save films into queues, and revisit their saved titles along with associated metadata, trailers, and posters. ## CORE FEATURES 1. **Current Cinemas**: Users can browse a list of movies currently showing in cinemas, enriched with information from MovieGlu, including titles, posters, synopses, and trailer buttons. 2. **Saved Movie History**: Users can save films, ensuring they are accessible with all relevant metadata, even if they disappear from current listings. 3. **Poster Management**: Posters are downloaded and stored securely in Supabase Storage, guaranteeing their availability for old saved movies. 4. **Trailer Verification**: The app checks trailer availability and can refresh links using multiple sources if the original is broken. 5. **Movie Queues**: Users can manage their viewing preferences with distinct queues for "Go to cinema," "Watch later," and "Watched history." 6. **Admin Controls**: Administrators can manage API keys, trigger sync tasks, and refresh metadata and trailer links. ## 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**: A single-page layout with sections for current cinemas, saved movies, and admin controls, featuring clear navigation and a responsive design to enhance user experience. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: React Context API or Zustand for state management ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a Next.js project with TypeScript and install required dependencies (Tailwind CSS, Prisma, Supabase SDK). 2. **Database Configuration**: Set up Neon Postgres and create the necessary database schema using Prisma ORM. 3. **API Integration**: Implement provider clients for MovieGlu and TMDb to fetch movie data. 4. **Poster and Trailer Handling**: Create logic to download and upload posters to Supabase Storage and implement trailer verification and refresh logic. 5. **Build UI Components**: Develop UI components using Tailwind CSS and shadcn/ui, focusing on a minimalist design. 6. **State Management**: Implement state management to handle user interactions with movie queues and saved histories. 7. **Admin Interface**: Build an admin section for managing sync tasks and API keys, ensuring proper access controls. 8. **Testing**: Conduct thorough testing of features, including edge cases for trailer verification and data fetching. 9. **Deployment**: Prepare the application for deployment on Vercel, ensuring all environment variables are configured correctly. 10. **Documentation**: Write a comprehensive README outlining setup instructions, environment variables, and how to run sync jobs. ## USER EXPERIENCE Users will interact with a clean, intuitive interface where they can easily browse current movies, save titles for later, and manage their viewing preferences. The app will provide smooth navigation between sections, a clear presentation of movie information, and responsive elements that enhance usability across devices. ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
