Melville
Theatre
A mobile-first website for a real independent cinema in Melville, Saskatchewan — designed and deployed through AI-assisted development. No frameworks, no build tools. Just conversation, iteration, and a fluorescent point color. Now live.
Site Walkthrough
See it in action.
The Starting Point
A real cinema. A very old website. A blank file.
Melville Theatre is a small independent cinema in Melville, Saskatchewan — open since 1995, run by Frank Cox. The theatre has a website at melvilletheatre.com, but it's a relic that hasn't changed in over a decade. To find out what's playing, residents still call ahead or just show up.
"A small problem, in a small town, that was worth solving."
Design System
Built through conversation, not a style guide.
- Point color: #E4FE00 — fluorescent yellow-green on dark backgrounds; darker olive (#4D5900) on light. Started as amber, evolved through two rounds of feedback.
- No borders. No shadows. — components differentiated by background contrast only. Decided early, held throughout.
- Outfit, one typeface — weights 300–900, used for everything.
Technical Highlights
A few decisions worth documenting.
- CSS-only scroll overlay — hero fixed at z-index 1; content sections slide over it with solid backgrounds. No JavaScript required.
- AI-regenerated theatre exterior — aerial sky-view image generated by Nano Banana from the original Google Street View. Not a photo, not an embed.
-
"Bring a Friend!" — per-movie OG injection — share buttons generate a URL with a movie key (
?movie=bride). A Netlify Edge Function injects movie-specific Open Graph tags so shared links show the correct poster in iMessage or Facebook. -
Admin CMS — no code required — password-protected
/adminform lets the owner update Now Playing and Coming Soon. Save commitsmovies.jsonto GitHub via API; Netlify auto-deploys in ~30 seconds.
How It Was Built
Design decisions made through conversation.
Step 01
Content Gathering
Content — FAQ, admission prices, About copy — was pulled from the existing site and restructured in conversation. AI helped rewrite it for clarity.
Step 02
Design System First
Color and type established before any layout. The point color went through two iterations based on visual feedback via screenshots.
Step 03
Section by Section
Hero → Coming Soon → About → Info → FAQ → Footer. Each section built, reviewed, and refined before moving on.
Step 04
Deploy & Handoff
Pushed to GitHub, deployed on Netlify. Admin CMS built so the owner can update movie info without touching code.
Reflection
The best decisions were subtractive.
Every time I thought "should I add X?", the answer was almost always no. A small-town cinema needs to answer three questions quickly, on a phone, and make it easy to bring a friend. The admin panel was the most practically valuable part — the only version of this project that works long-term is one the owner can actually maintain.
Tools