Cinemaker

Personalized movie & TV trailer browsing. Like or Dislike to refine your taste, Skip to the next trailer, and instantly get AI‑generated plot summaries without reloading the page.

Comment

Inspiration

We wanted to transform the way people discover what to watch next by combining the immediacy of YouTube trailers with AI-powered summaries. Instead of clicking through dozens of pages and wrestling with descriptions, users can instantly see a concise, AI-generated overview of each title, making browsing both effortless and engaging.

What it does

Cinemaker delivers a continuous stream of hand-picked movie and TV trailers in your browser. Users can Like or Dislike trailers to refine their personal taste profile, Skip to advance to the next title, and receive a real-time, AI-generated summary of plot and characters—all without ever reloading the page.

How we built it

Frontend: React with functional components and useEffect/useState hooks for live updates, combined with CSS for a clean, responsive UI.

Backend: Flask server exposing two endpoints (/api/skip and /api/describe), integrated with Google GenAI’s Gemini API for natural-language summaries.

Data Flow: On each skip, React posts the new title to Flask, which queries the AI model and returns a summary; React then updates the UI automatically.

Deployment Tools: Flask-CORS for cross-origin requests, dotenv for secret management, and local development on localhost:3000 (React) and :5000 (Flask).

Challenges we ran into

CORS Configuration: Ensuring React and Flask could communicate smoothly without CORS errors required fine‑tuning of headers.

Async State Management: Coordinating useEffect triggers with rapid skips and API latency meant handling race conditions and loading states.

Prompt Engineering: Crafting the right instructions for the Gemini model to produce concise, relevant summaries took several iterations.

Accomplishments that we're proud of

Seamless UX: No page reloads and instant summaries create a fluid browsing experience.

AI Integration: First-time successful integration of Google GenAI Gemini for dynamic content generation.

Taste Learning: Implemented a basic feedback loop (Like/Dislike) that adapts to user preferences over time.

What we learned

Deepened our understanding of React hooks (useEffect, dependency arrays) and state management.

Gained hands-on experience with Flask and RESTful API design.

Explored prompt engineering best practices to drive high-quality AI outputs.

Tackled real-world CORS and asynchronous data-fetching challenges.

What's next for Cinemaker

User Accounts & Persistence: Save likes/dislikes and viewing history to personalize the feed.

Recommendation Engine: Use feedback data to power smarter, personalized trailer suggestions.

Mobile Optimization: Create a React Native version for on-the-go browsing.

Enhanced UX: Add search, filtering, and playlists for deeper discovery.

Built With

Share this project:

Updates