Movie Night was born from a desire to learn more about developing in Ruby on Rails while solving a real world problem.
My family loves movies of all kinds. Long before streaming services, we had accumulated a large DVD collection of our favorites, along with entire series of TV shows. Hundreds of DVDs turns out to be a challenge to organize and while we devised a way to cut down on the space using binders sorted by genre, we had to remember where we had placed a particular movie in order to watch it.
This presented a great opportunity to use the power of a database to help us not only find a DVD when we want to watch a movie but also help us rediscover movies we had not watched in a long time and prune our collection based on data around our personal ratings and usage.
My Contribution
As a personal project where I’m one of the primary users, I focused solely on design and development.
Design
I defined a design system and templates that met our needs. I also broke the project down into individual features that made up a Minimum Viable Product that we could start using right away, with plans for incorporating more advanced features later.
Development
With the primary goal of this project centered around learning Ruby on Rails, I focused on harnessing as much of the server-side functionality as possible, limiting the amount of JavaScript used in the initial version.
Setting a Vision
I needed a solution to solve our immediate problem of organization and I wanted to set us up to use the technology to learn something about our viewing habits as well.
Simple
Easy access right into the content, with a variety of ways to filter the content depending on our mood.
Fun
The browsing and data entry experiences needed to be a joy to use so it would become our go-to when deciding what to watch.
Personal
We have opinions about these movies and wanted the app to reflect our thoughts rather than pulling it from an online service.
Evolving
I have lots of ideas on how to expand this app to meet new needs and enhance the experience through sounds animation, and data.
Crafting the Structure
Like most families, we have a variety of devices ranging from phones to desktop computers. It was important to us to be able to easily access our library of movies from any of these devices and have consistent experiences.
Our needs for the content was pretty simple: One template for listings and another for the details of a particular movie. For managing our content, we needed a way to enter movies and genres efficiently.
Creating a Design System
Movie posters play a central role in the design as they make it easy to identify themes, actors, and more. Because of the wide variety in colors and styles, the design needed to be based in neutral colors. I often think of going to the theater, with lights dimmed and the red curtains drawn and decided to reflect that in this design.
The system provides light and dark versions of many elements in order to accommodate the different backgrounds used depending on context.
Building the Site
CSS
I built a system of grid, elements, and components with CSS. Because CSS can perform much better for animation than JavaScript, I leveraged it whenever an effect was needed.
JavaScript
JavaScript was limited to simple click handlers for menus in this version. As I incorporate other features, I may explore using libraries and frameworks if there are clear benefits.
Ruby on Rails
Most of the functionality and views are driven by Ruby on Rails. I focused on understanding how the different parts work together to create an app.
Completing the Design
The first version of the library perfectly met our core needs and leaves plenty of room for growth and enhancement.