Designed an application to provide users with movie ratings, summaries, and releases.
BCIT React JS Project
2 Weeks Execution Time
Completed Aug 2019
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.
“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!”
- 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.
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.
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.
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.
“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
- 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.
Movie posters stored in the API data would be my primary visual aid that I would design around:
Movie posters would be generally displayed in a 1:3:5 ratio.
The app needed to have a minimal amount of additional elements and colour to avoid style clashes with colourful movie posters.
The logo typeface used was “Crimson Text”. Heading and body typefaces were sans-serif using the “Blinker” typeface, to maintain design simplicity.
The prototype was built using some React best-practices:
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”.
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.