Technical problem
Viewers need eligible titles and valid !vote commands fast.
Movie library
Public domain movie picks.
Search public-domain titles, copy the exact !vote command, and return to Twitch chat with fewer typos.
Search title, year, runtime, or rating. Press Enter or jump to results, then copy the vote command.
Show matching results
110
movies
1902-1968
release years
- Status
- Live companion catalog
- Last updated
- May 2026
MovieBot system surface
Voting catalog for MovieBot.
Title/year/runtime/rating filters, copyable !vote buttons, lazy posters, labels, and a no-JavaScript list.
Constraints
GitHub Pages page with external posters/IMDb links and no-JS/poster fallbacks.
Approach
Searchable catalog with metadata filters, generated vote commands, clipboard fallback, lazy posters, and noscript.
Tradeoff
GitHub Pages is simple, but data and fallback markup must stay in sync.
Next improvement
Next: generate cards/fallback from one source, add poster health checks, and improve QA.
What I built
- Built search by title, year, runtime, and rating.
- Implemented copyable
!votecommands with labels and feedback. - Added lazy poster cards, labeled metadata, and normalized poster URLs.
- Kept a complete ordered
noscriptmovie list.
Uses IMDb links, hosted posters, and public-domain metadata; UI/search/copy behavior is custom client-side code.
Production readiness
- Solid: no-JS fallback, client search, copyable votes, fixed poster dimensions, lazy loading, and labels.
- Limit: data lives in page/JS source and posters depend on external URLs.
- Next: generate from one source, add poster checks, validate updates, and test clipboard behavior.
- Privacy: read-only catalog, no viewer tracking, verified links, sanitized future user data.
Testing and QA notes
- Automated: no dedicated catalog tests yet.
- Manual: search, reset, copy votes, result counts, card render, and
noscriptcompleteness. - Browser/device: mobile search, tap targets, focus, clipboard, textarea fallback, poster loading, and overflow.
- Edge cases: empty searches, poster failures, blocked clipboard, missing links, duplicate titles, and no-JS browsing.
- Limit: cards and fallback list are not generated from one source yet.
Deployment and run notes
- Hosted: GitHub Pages page backed by
movie-library.jsand fallback markup. - Config: no env vars; metadata lives in JavaScript and fallback HTML.
- External: IMDb links and poster URLs; search/copy run in browser.
- Local: run
python -m http.server 8000, then open/movie-library.html. - Security: no frontend secrets; keep read-only and sanitize any future user data.
Voting path
Each card copies !vote Movie Title without retyping long titles.
Public-domain catalog
Data includes title, year, runtime, IMDb rating/link, and poster URL.
No-JS fallback
If JavaScript is disabled, the ordered list remains readable.
Poster performance
Posters use fixed dimensions, async decoding, lazy loading, and fallback styling.
Technical notes
Frontend details.
Search and filtering
Vanilla JS filters by title/year/runtime/rating and updates an aria-live result count.
Vote command copying
Each card stores a generated !vote. Copy uses Clipboard API, textarea fallback, and temporary states.
No-JS fallback
noscript keeps the full ordered list when filtering, copy, and posters are unavailable.
Image loading strategy
Poster URLs are normalized, constrained to the expected host, lazy-loaded, dimensioned, and fallback-styled.
Labels and alt text
Search has a label; copy buttons, IMDb links, and poster alt text are title-specific.
Catalog controls
Find a title. Copy the vote.
Keyboard shortcuts
- Tab / Shift+TabMove through search, Clear, links, and copy buttons.
- Type searchFilter by title, year, runtime, or rating.
- Enter / SpaceActivate focused buttons or links.
- ClearUse the Clear button to reset the catalog search.
Touch controls
- Tap searchOpen the keyboard and filter the catalog.
- Scroll cardsBrowse the lazy-loaded poster grid vertically.
- Copy !voteTap a movie card button to copy its chat command.