Designed an application to provide users with movie ratings, summaries, and releases.
Timeline
BCIT React JS Project
2 Weeks Execution Time
Completed Aug 2019
Applied Skills
Competitive Analysis
Content Strategy
Wireframing
Product Prototyping
Summary
Watchlist is a movie database application I built with the React JavaScript framework. Dynamically storing movie titles within the last 6 months, it helps users see which recent films are popular and high-rated according to their genre.
This project involved connecting to a movie database API, finding useful purpose for it, and then designing and prototyping the entire application using React JS.
About Watchlist:
“Which movies is everyone talking about? Watchlist is always up to date. Browse for your favourite genres or movies, check their ratings, and see how they match up!”
Objectives
- Find a product purpose for the API data provided by The Movie Database (TMDb).
- Design a user interface that accommodates varieties of movie thumbnails.
- Create a React prototype of the movie database application.
Inspiration
Trending Movies
Growing up, I was always out of the loop when it came to knowing which movies everybody was referencing and talking about. My parents only enjoyed watching historical and crime dramas – so I was out of luck when it came to getting a wide range of movie recommendations.
In homage to those awkward years, I felt like I could use my assignment to also satisfy my inner child and alleviate those awkward memories.
Data Management
After obtaining the API key from The Movie Database’s website, a connection with the API database was established:
Our project’s only hard requirement was to at least show movie listings by genre. Beyond that, we had a choice on the information we wanted to display our movie database.
Product Features
Our instructor showed us some examples of past work and we got to work. The prior examples and what most of my classmates went with were:
- A movie poster or wide image.
- The complete movie summary.
- The genre of the film.
- Perhaps a rating or release date.
For my application, however, I felt that using the data to show a full, detailed movie summary with was a bit irrelevant and unnecessary – as the main TMBd website already fulfilled the purpose of giving comprehensive film reviews:
To create a valid use-case for my product, my movie database would function as a preview site – for those who just wanted to check which movies were trending or released.
User Stories
“I want to know what others think of a new movie before I decide to watch it.”
Casual Movie Goer
“I want to know which recent fantasy titles are good to watch.”
Fantasy Film Fan
Ideation
Main Components
- A “Popular” section, a TMDb formula based on recent and popular films.
- The “Genres” section to browse recent/relevant films in their genre.
- An “About” section to tell users about myself and the application.
Poster Thumbnails
Movie posters stored in the API data would be my primary visual aid that I would design around:
Wireframe Iteration
Movie posters would be generally displayed in a 1:3:5 ratio.
Logo Concept
The app needed to have a minimal amount of additional elements and colour to avoid style clashes with colourful movie posters.
Typography
The logo typeface used was “Crimson Text”. Heading and body typefaces were sans-serif using the “Blinker” typeface, to maintain design simplicity.
Implementation
React Prototype
The prototype was built using some React best-practices:
User Interface
After prototyping my bare-bones application, UI elements were added and iterated upon to address accessibility or usability needs:
- A border was added between each movie poster to show separation.
- Any of the three menu options would be underlined if recently clicked.
- When scrolling down, a back-to-top button was added for usability.
- Fade-in effects were added to give an interactive feel upon use.
Upon tapping (or hover on desktop), a short summary would show, with a link to The Movie Database for detailed movie breakdowns.
- Movies without images had a filler image placed.
- Movies without ratings would be assigned a rating of “N/A”.
Insights
My first dive into the world of React taught me the importance of double-checking your existing code and structure before continuing.
It affirmed that the best match for multiple colourful images/thumbnails is less colour, often just black or white. This explains why Netflix is primarily black, while Instagram, Facebook and other social mediums who cannot control the style of media content on their applications have white backgrounds.