Creating the world's simplest movie browsing website for offline film collections.
Film Storage Woes
Previously I had a living room corner that was dedicated to DVD shelving. However, the last house move meant this wasn’t suitable anymore as space was at a premium.
I toyed with the idea of converting all my DVDs and Blu-Rays to files and storing on a NAS. My main objection to this was the time investment, but also my lack of knowledge around how to get a decent and full copy. I will occasional watch the extras on a DVD, did I need to copy all those as well? How about ensuring subtitles and alternative audio tracks are available?
Dense storage for 400 DVDs, not so easy to browse.
In the end I settled for another low tech solution, the giant DVD case pictured.
What do you want to watch?
It is difficult to browse the films in the case. Not just physically annoying to open it up and flip the pages, but visually there is very little to work with. Some discs in the collection have the film title and logo but nothing else to help you remember what the film is about, or even the genre beyond some poor extrapolation you can do in your head that a film rated 18 is probably not a family friendly comedy.
I had foreseen this at the time of moving the discs from their cases to the giant folder. My starting point had been to make a Google spreadsheet just listing the film names.
I began an online search for a UI that would effectively read in the list of film names and give me a basic interface showing the film posters etc. To the best of my knowledge, this doesn’t exist. Or rather, solutions that are close to what I’m after are way over complicated. I don’t really want to run a server instance for this UI, and I don’t really want to maintain some database beyond my Google spreadsheet.
Asking ChatGPT
I asked ChatGPT to build me the web app I was after.
- Read in a list of film names from a Google spreadsheet
- Look up film data, including the poster images
- Display film posters in a grid
- Clicking the poster should give a modal that provides further film description
It did a really good first pass with something that was well on the way to usable straight out of the gate. It suggested publishing the film list to get a URL that would give a CSV. It recommended the OMDB API for film posters and information. This was all great stuff. The only revision I made at this point was to ask it cache the data (the API gives 1000 free API requests per day and is also not particularly fast).
After trying this out I made a few follow up tweaks:
- Push the google sheet ID and OMDB API key to the URL. I wanted to be able to host on GitHub pages or similar. Having the API key isn’t going to work in the public repo.
- Add some tag and genre filters.
- Auto order ‘unwatched’ films first.
- Minor styling improvements. A dark background did wonders.
More engaging than a list of film titles in a spreadsheet...
A modal gives extra information about a selected film.
I’m really pleased with the result. It’s basic but easy to use and maintain.
If you think you’d like to use the same thing it’s available at movies.falkus.co, although you’ll need to supply your own Google Sheet ID and OMDB API key before your film collection will show. Code can be found on Github.
AI Bootstrap
I’ve been using various AI tools increasingly throughout this year but whilst typing this post it occurs to me this is the first app where I’ve used AI to bootstrap the bulk of it up front. It really is an impressive experience. I’m sure I could have got it to write the whole thing, with me just inputting my amends, but I felt that the dev/test loop for some of those was just quicker to do myself, although I’m sure as the speed of token output improves it’ll be increasingly likely that getting AI to do those tweaks would have been faster than I could do them.
I wonder how far we are from code being written by AI being the norm, such that it doesn’t even get a mention in a post because it is just a given that the tooling to create the program would have involved AI at some point if not entirely. I’ll probably keep mentioning it for now.