Pictures

The London Cinema Calendar — Aggregating screenings from 60+ cinemas into one unified view.

Live at pictures.london

---

What is this?

London has an incredible cinema scene, but finding what's showing means checking dozens of different websites. Pictures solves this by scraping listings from venues like BFI Southbank, Prince Charles Cinema, Curzon, Picturehouse, ICA, Barbican, and more — presenting everything in one filterable calendar.

Features

• Unified calendar — All indie cinemas in one view
• Smart filters — By cinema, date range, format (35mm/70mm/IMAX)
• Film tracking — Mark films as "want to see" or "seen"
• Daily updates — Fresh data scraped from each venue
• Mobile-friendly — Works great on phone
• Free — No ads, no subscription

Cinemas covered

Chains: Curzon (11 venues), Picturehouse (10 venues), Everyman (15 venues)

Independents: BFI Southbank, BFI IMAX, Prince Charles Cinema, ICA, Barbican, Rio Cinema, Genesis, Peckhamplex, The Nickel, Electric Cinema (2 venues), Lexi Cinema, Garden Cinema, Close-Up Cinema, Ciné Lumière, Castle Cinema, Castle Sidcup, ArtHouse Crouch End, Phoenix Cinema, Rich Mix, Regent Street Cinema, Riverside Studios, Olympic Cinema, David Lean Cinema, Gate Notting Hill, Screen on the Green, Coldharbour Blue

---

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Database	PostgreSQL via Supabase
ORM	Drizzle
Auth	Clerk
Analytics	PostHog (EU hosted)
Hosting	Vercel
Scraping	Playwright + Cheerio
Scheduling	Manual, from the Mac (npm run scrape:unified)
AI	DeepSeek (npm run agents:enrich)
Styling	Tailwind CSS v4

---

Getting Started

Prerequisites

• Node.js 20+
• PostgreSQL database (we use Supabase)
• TMDB API key (for film metadata)

Installation

# Clone the repo
git clone https://github.com/jamesbarge/pictures.git
cd pictures

# Install dependencies
npm install

# Copy environment variables
cp .env.local.example .env.local
# Fill in your values (see Environment Variables below)

# Push database schema
npm run db:push

# Seed initial data (cinemas)
npm run db:seed

# Start dev server
npm run dev

Environment Variables

Required variables in .env.local:

# Database (Supabase)
DATABASE_URL=postgresql://...

# TMDB API (for film metadata)
TMDB_API_KEY=your_key

# Clerk Auth
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...
CLERK_WEBHOOK_SECRET=whsec_...

# PostHog Analytics
NEXT_PUBLIC_POSTHOG_KEY=phc_...
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
POSTHOG_API_KEY=phx_...

# AI Enrichment (optional, npm run agents:enrich)
DEEPSEEK_API_KEY=your_key

See .env.local.example for the full list with documentation.

---

Commands

Development

npm run dev          # Start dev server
npm run build        # Production build
npm run lint         # Run ESLint

Testing

npm run test         # Run unit tests (watch mode)
npm run test:run     # Run unit tests once
cd frontend && npx playwright test   # Frontend E2E (pictures.london)

Database

npm run db:push      # Push schema changes
npm run db:studio    # Open Drizzle Studio
npm run db:seed      # Seed cinemas
npm run db:enrich    # Enrich films with TMDB data
npm run db:cleanup-screenings  # Remove past screenings

Scrapers

# Individual cinemas
npm run scrape:bfi
npm run scrape:pcc
npm run scrape:curzon
npm run scrape:picturehouse
npm run scrape:everyman
# ... (see package.json for full list)

# Batch
npm run scrape:chains       # All chain cinemas
npm run scrape:independents # All indie cinemas
npm run scrape:all          # Everything

AI Agents

npm run agents:enrich   # Improve TMDB matching (DeepSeek)
npm run agents:verify   # Deterministic data quality checks

---

Scraping Schedule

Every scrape runs from the Mac. npm run scrape:unified (the /scrape command) scrapes all cinemas and runs enrichment; npm run scrape <cinema-id> scrapes one venue. Nothing runs in the cloud: Inngest, Trigger.dev, Vercel crons and scheduled GitHub Actions have all been removed, so a screening written without a matching scraper_runs row points to a leftover cloud job.

---

Architecture

frontend/                # SvelteKit public site (pictures.london)
src/                     # Next.js app (api.pictures.london)
├── app/                 # App Router: API routes, admin, sign-in
│   ├── api/             # API routes
│   └── admin/           # Admin dashboard
├── components/          # Admin UI primitives and Clerk wrappers
├── db/                  # Database schema & utilities
│   └── schema/          # Drizzle schema files
├── scrapers/            # Cinema scrapers
│   ├── chains/          # Curzon, Picturehouse, Everyman
│   ├── cinemas/         # Individual venues
│   └── utils/           # Shared scraping utilities
├── agents/              # Data quality agents
└── lib/                 # Utilities & helpers

Documentation

See ARCHITECTURE.md for a deeper look at the data flow, scraper architecture, and system design.

---

Scraper Types

1. Playwright — For JS-heavy sites (Curzon, BFI, Everyman). Slower but handles dynamic content.
2. Cheerio — For static HTML (most independents). Fast.
3. API-based — When cinemas expose APIs (Picturehouse). Most reliable.

---

Data Sources

• Screening times: Scraped directly from cinema websites
• Film metadata: TMDB API
• Enrichment: DeepSeek for difficult title matching (npm run agents:enrich)

---

Contributing

This is a personal project, but PRs are welcome for:

• New cinema scrapers
• Bug fixes
• Performance improvements

Please open an issue first to discuss significant changes.

---

License

MIT

---

Acknowledgements

• Film data from The Movie Database (TMDB)
• Built with Next.js, Drizzle, Clerk
• Hosted on Vercel

---

Built by a cinephile, for cinephiles.