Notflix

Skills Applied

  • Responsive Design
  • React JS
  • React Router
  • CSS 3
  • Use of API (The Movie Database API)

Tools

  • Adobe Photoshop
  • Adobe Illustrator

About the Project

Notflix is a movie database application built with the JavaScript framework - React. It stores movies dynamically depending on the API called. It displays a movie's information as well as the ratings.

Design Process

Style Analysis

Movie posters are designed with different colors and styles so I want to make my website as minimal as possible to avoid clashes. It was in this situation where I devoted most of my time making the app work rather than concentrating on the style itself.

Despite this decision, I still took into consideration how I wanted it to look like. For the header, I implemented a banner with the title of the app and immediately followed by the search bar.

Notflix banner

The reason why I wanted the search bar to be more prominent was because as a user of other movie databases, I don't want to think. Like me, I want users to jump straight to a search bar and immediately type in what they are looking for in the database.

Wireframes

Level Up wireframe

Development

First, I obtained an API key by signing up at the The Movie Database (TMDB) website.

Screenshot of the TMDB API page

I find the TMDB documentation for API usage very helpful. For situations like getting popular movies to getting release dates, the documentation for developers offers it all:

Screenshot of the TMDB API documentation page for developers

I enjoyed using the useState() hook because they are easy to work with and to test. Also, it makes your code look cleaner and more readable. When coupled with useEffect(), these hooks make it easier to implement API calls. Below is a snippet of how to import these hooks:

One of the most challenging parts of creating this app was storing favourite movies into the "Favourites" local storage. After several tries, I managed to keep them in local storage and also was able to remove them if necessary.

Insights

There are a lot of features built in React that makes working with it easier. I personally liked using the hooks and liked how powerful it is when doing API calls.

One mistake I made was not checking how everything works before publishing it. An example would be the navigation menu items. They are a bit twitchy on hover and are not great for user experience.