Black Cat MD

Mockup of front page of Black Cat Movie Database on multiple devices

Overview

Black Cat Movie Database (BCMD) is a comprehensive database featuring the latest and greatest films for movie buffs everywhere. A fully responsive application built using React, SASS, and The Movie Database API to dynamically showcase 12 of the most popular, top-rated, now playing and upcoming movies.

Tech Stack

React iconAPI iconSASS iconAdobe Photoshop iconAdobe XD icon

Role

Web Designer & Developer

In the first stage of the design process, I designed a high-fidelity mockup in Adobe Photoshop for mobile and desktop layouts.

screenshot of site

After the mockup was completed, I created a high-fidelity interactive prototype using Adobe XD for both mobile and desktop. This was essential for UI and UX testing and usability and allowed me to receive and implement beneficial user feedback before moving forward to the development phase.

screenshot of site

By using the useEffect Hook I was able to request and retrieve data with the Movie Database API to display content such as the movie title, tagline, current rating, release date, genre and synopsis.

screenshot of site

As I click on the different category buttons, you can see TMDB's API in action as the top 12 movies per the corresponding category are retrieved and displayed.

Black Cat MD

screenshot of site

I implemented the localStorage Hook to store and delete the user's favourite movies which creates a dynamic and personalized experience for the user.

Reflection

This was my first time using an API key and I found The Movie Database API Docs very helpful for the necessary query strings to add to my API calls in order to fetch and output my required content. I really enjoyed the syntax of React and working with real-time data. It was a bit challenging working with so many components, pages and SASS partials, but it was an opportunity to acquire discipline in keeping my code and files organized. In hindsight, I would remove the synopsis from the movie cards on mobile and add it as a hover effect on desktop as this would reduce the length of the movie cards and add an interactive element to the user experience.