Skip to content

Architrb1795/CinePick

Repository files navigation

🎬 CinePicks

Curated cinema for curious minds.

Live Demo Cinema Club IITR

A beautiful movie recommendation website for Cinema Club, IIT Roorkee. Built with React and powered by TMDB & Google Gemini AI.

CinePicks Preview

✨ Features

  • 🤖 AI Smart Search - Powered by Gemini 1.5 Flash. Describe your mood (e.g., "dark thriller from the 90s") and get semantic recommendations.
  • 🎥 Curated Spotlight - Weekly Editor's Picks with immersive blurred backdrops and gold accents.
  • 🎞️ Live Trailers - Instant "Watch Trailer" button (auto-fetched) for every movie.
  • 🌍 Streaming Info - See exactly where to watch (Netflix, Prime, Apple TV) with real logos.
  • 🎨 Neo-Noir Design - Cinematic dark mode with a compact, zero-scroll interface.
  • ⚡ Smart Filtering - Filter by Mood, Genre, Year, Runtime, and more.
  • 📱 Fully Responsive - Smooth animations and mobile-first layout.

🔗 Connect with Us

Stay updated with Cinema Club IIT Roorkee:

🛠️ Tech Stack

  • Frontend: React 18, Vite
  • Styling: CSS Modules, Framer Motion (Animations)
  • Data: TMDB API (Native Integration - No Rate Limits)
  • AI: Google Gemini API (Semantic Search)
  • Deployment: Vercel

🚀 Getting Started

Prerequisites

  • Node.js (v18+)
  • TMDB API Key (Free)
  • Google Gemini API Key (Optional, for Smart AI)

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/cinepicks.git
    cd cinepicks
  2. Install dependencies:

    npm install
  3. Configure Environment: Create a .env file:

    cp .env.example .env

    Add your keys:

    VITE_TMDB_API_KEY=your_tmdb_key
    VITE_GEMINI_API_KEY=your_gemini_key  # Optional
  4. Run Locally:

    npm run dev

📁 Project Structure

src/
├── components/
│   ├── AIMovieSearch.jsx   # Gemini-powered Search Overlay
│   ├── Navbar.jsx          # Responsive nav with SVG icons
│   ├── Hero.jsx            # Dynamic background & Spotlight
│   ├── Spotlight.jsx       # Featured movie section
│   ├── MovieModal.jsx      # Compact Details, Trailers & Streaming Info
│   └── Footer.jsx          # Social links & branding
├── services/
│   ├── tmdbApi.js          # Core Movie Data & Transformations
│   ├── streamingApi.js     # TMDB Watch Providers Integration
│   └── movieRecommenderApi.js # Hybrid (AI + Keyword) Search Logic
├── data/
│   └── movies.js           # Curated fallback collection
└── App.css                 # Global theme styles

📄 License

MIT License. Crafted with ❤️ by Cinema Club, IIT Roorkee.

About

CinePicks is a cinematic movie discovery web app built with React, integrating TMDB and Gemini AI to deliver intelligent recommendations, advanced filtering, and in-app trailers in a dark, film-club themed UI.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors