Skip to content

README.md

Latest commit

 

History

History
145 lines (108 loc) · 4.8 KB

README.md

File metadata and controls

145 lines (108 loc) · 4.8 KB

🎬 MoviePicker

A polished, interactive single-page web app for discovering movies based on genre, mood, runtime, and more. Built with React + Vite, optionally powered by the TMDB live database.

Live site: https://movie-picker-css-382.netlify.app

Features

  • Multi-select genre & mood chips — pick any combination to narrow results
  • Runtime presets — Under 90 min, 90–120 min, 120–150 min, 150+ min
  • Year range dual sliders — filter by release decade
  • Min rating chips — 6+, 7+, 8+, 9+
  • Streaming platform toggles — Netflix, Hulu, Prime, Disney+, Max
  • 12-language filter — English, Korean, French, Japanese, Spanish, German, Italian, Portuguese, Chinese, Hindi, Arabic, Russian
  • Live search — instant debounced filtering
  • Sort — by rating, year, runtime, or title A–Z
  • 🎲 Surprise Me — picks a random match with confetti
  • 🔄 Not this one — cycles to the next recommendation
  • ♥ Favorites — saved to localStorage, viewable in a slide-in panel
  • 👁 Watched toggle — mark movies as seen
  • Tonight's Pick — hero card with match-score ring, full metadata, and a "why recommended" explanation
  • Match score % — shown on every card
  • Movie detail modal — star rating, full description, platforms, mood tags
  • Load More pagination — browse hundreds of TMDB results
  • Dark / Light theme toggle
  • Responsive design — works on mobile and desktop
  • Keyboard accessible — Enter/Space to open cards, Esc to close modals

Tech Stack

Layer Choice
Framework React 18
Build tool Vite 6
Styling Inline CSS-in-JS (no external CSS lib)
Data TMDB API v3 (live) / 25-movie mock (offline)
Persistence localStorage (favorites, watched, theme)
Hosting Netlify

Getting Started

Prerequisites

  • Node.js 18+
  • npm 9+

Install & run

git clone <repo-url>
cd CSS-382-01-ShortAIProject
npm install
npm run dev

Open http://localhost:5173 — the app works immediately with 25 demo movies.

Connecting to TMDB (live database)

Get access to 500,000+ real movies in a few minutes:

  1. Create a free account at https://www.themoviedb.org
  2. Go to Settings → API and copy your API Key (v3 auth)
  3. Create a .env.local file in the project root:
VITE_TMDB_API_KEY=your_api_key_here
  1. Restart the dev server (npm run dev)

The app detects the key automatically. A green ● TMDB badge appears in the navbar when live mode is active.

Adding the key to the Netlify deployment

  1. Open https://app.netlify.com/projects/movie-picker-css-382
  2. Go to Site configuration → Environment variables
  3. Add VITE_TMDB_API_KEY with your key
  4. Trigger a redeploy — the live site will now pull from TMDB

Project Structure

src/
├── data/
│   └── movies.js          # 25-movie mock dataset + genre/mood/platform constants
├── services/
│   └── tmdb.js            # TMDB API calls, genre maps, mood inference, movie mapper
├── components/
│   ├── Navbar.jsx          # Sticky nav: title, TMDB badge, theme toggle, favorites
│   ├── Hero.jsx            # Tagline + live match count stats
│   ├── FilterPanel.jsx     # All filter controls (collapsible)
│   ├── MovieCard.jsx       # Grid card with poster, tags, fav/watched actions
│   ├── MovieModal.jsx      # Full detail modal (Esc to close)
│   ├── ResultsSection.jsx  # Tonight's Pick hero card + movie grid + Load More
│   ├── FavoritesPanel.jsx  # Slide-in favorites drawer
│   ├── ApiSetupBanner.jsx  # Setup prompt shown in demo mode
│   └── Confetti.jsx        # Particle burst on "Surprise Me"
├── App.jsx                 # Root: state, TMDB fetching, filtering logic
└── index.css               # Design tokens (dark/light), keyframe animations

Available Scripts

Command Description
npm run dev Start local dev server at localhost:5173
npm run build Production build to /dist
npm run preview Preview the production build locally

How Mood Inference Works

TMDB doesn't have a "mood" field, so moods are inferred from genre IDs:

Mood Mapped TMDB Genres
Feel-good Comedy, Animation, Romance, Family, Adventure
Dark Horror, Thriller, Crime, Mystery
Emotional Drama, Romance, Music
Mind-bending Sci-Fi, Mystery, Fantasy
Relaxing Animation, Comedy, Romance, Family
Suspenseful Thriller, Horror, Mystery, Crime
Inspirational Drama, Action, War, History
Funny Comedy, Animation

Course Context

Built for CSS 382 — Week 1 Short AI Project at UW.
The context.txt file contains the original LLM prompt used to spec and generate this application.