PicHouse SSR - Picturehouse Cinema Schedule

A statically generated site with five listings tabs - Movies, showing Screen 1 showtimes for Picturehouse Finsbury Park & Picturehouse Central, IMAX, showing every bookable screening at BFI IMAX, What's on, every film from both once with its trailer, summary and booking, Trailers, showing official trailers released by film studios in the last 30 days, and Box Office, showing the UK weekend top 10 - plus an About page.

🔗 View Live Site → pichouse-ssr.pages.dev

Features

Movies tab

• 🎬 Movie Listings - Screen 1 showtimes from Finsbury Park & Picturehouse Central
• 🎥 Trailers - YouTube trailers per film via TMDb, with OMDB fallback
• ⭐ Metadata - Overview, runtime, release date and rating from TMDb
• 🎟️ Booking Links - Direct links to Picturehouse booking
• 📅 Smart Filtering - Weekday evenings (after 6 PM) + all weekend showtimes
• 🏷️ Event Screenings Matched - "Film + Q&A with ..." listings still find the film's poster and trailer

IMAX tab

• 🎞️ BFI IMAX Listings - Every bookable screening at BFI IMAX, Waterloo
• 🚫 Sold Out Removed - Sold-out and past screenings are left out
• 🎥 Trailers - Poster and trailers from TMDb, matched by id
• 🏷️ 70mm Marked - IMAX 70mm print screenings are labelled

What's on tab

• 🎬 Every Film Once - Screen 1 and BFI IMAX films merged, one entry each
• 📝 Know What It Is - Poster, summary, certificate, runtime and a trailer
• 🎟️ Book Per Venue - Next screening at each venue, plus a link to all times
• 🗓️ Now and Coming Soon - This week's films first, later ones below

Trailers tab

• 🎞️ Studio Trailers - Official trailers from 50 studio YouTube channels, last 30 days
• 🏷️ Studio Filter - Filter by studio, with per-studio counts
• 🔀 Co-release Merging - One trailer posted by two studios collapses into a single card credited to both
• 🚫 Noise Filtering - Excludes teasers, streaming-only series and back-catalogue re-uploads

Box Office tab

• 💷 UK Weekend Top 10 - Ranked chart with weekend and running totals
• 🔁 Re-releases - Matched to the original film's poster and trailer, with an optional display name
• 🎞️ Trailers - A playable TMDb trailer per film, falling back to a YouTube search link
• ⭐ Metadata - Poster, synopsis, runtime and rating from TMDb

All three

• 📱 Mobile First - Layout, showtime grid and tap targets tuned for phones
• 🌗 Light & Dark - Follows the reader's system theme; dark is the light theme inverted
• 🚀 Auto-Updates - Rebuilt daily via GitHub Actions when the listings change
• ▶️ Trailers your way - Click to play in a pop-up, or middle/Cmd/Ctrl-click to open on YouTube in a new tab

Tech Stack

• Framework: Nuxt 3 (Static Site Generation)
• Hosting: Cloudflare Pages (global CDN)
• CI/CD: GitHub Actions (checks at 07:37 and 21:37 UTC)
• Testing: Vitest (188 tests)
• APIs: Picturehouse, TMDb, OMDB, YouTube Data API v3, Box Office Mojo (scraped), Clusterflick (BFI IMAX)

All API calls happen at build time inside Nitro server routes, so no keys ever reach the browser and the deployed site is plain static HTML.

Local Development

Prerequisites

• Node.js 22+ (the lint toolchain requires it - eslint-plugin-unicorn uses Set.prototype.union)
• npm

Setup

1. Clone the repository:

   git clone https://github.com/Komsomol/pichouse-ssr.git
   cd pichouse-ssr
   

2. Install dependencies:

   npm install
   

3. Create .env file (copy from example):

   cp .env.example .env
   

4. Fill in your API keys in .env:

   Variable	Required	Purpose
   TMDB_TOKEN	✅	TMDb API Read Access Token (starts eyJ) - film metadata and trailers
   COOKIE	✅	Picturehouse website cookie - showtimes
   OMDB_API_KEY	➖	Metacritic scores, and fallback trailer lookup when TMDb has no video
   YT_API_KEY	➖	YouTube Data API v3 key - powers the Trailers tab

   The build fails without the two required values. Without the optional ones it still succeeds: the Trailers tab simply renders empty without YT_API_KEY.

Development Server

npm run dev

Access at: http://127.0.0.1:3000

Run Tests

npm test              # single run
npm run test:watch    # watch mode
npm run test:coverage # with coverage

Lint

npm run lint
npm run lint:fix

Generate Static Site

npm run generate

Output is in .output/public/. Note that generate, build and dev each run validate:env and lint first, and generate/build also run the tests - so a lint error or failing test stops a deploy.

Preview Production Build

npm run preview

Deployment

Two GitHub Actions workflows deploy to Cloudflare Pages via Wrangler. See DEPLOYMENT.md for setup details.

Workflow	Triggers	Behaviour
smart-deploy.yml	07:37 + 21:37 UTC, manual	Fingerprints the Picturehouse feed and BFI IMAX listings, and only rebuilds when either changed
deploy.yml	Push to main, manual	Always rebuilds and deploys

smart-deploy.yml owns the schedule. Its two runs land just after the two daily BFI IMAX data releases from Clusterflick; deploy.yml covers code changes. It also re-enables itself through the API on each run, because GitHub disables scheduled workflows after 60 days without repository activity.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗