🎬 CinePicks

Curated cinema for curious minds.

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

✨ 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:

• Facebook
• Instagram
• LinkedIn

🛠️ 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.