DiscoveryFlix

A responsive mockup of DiscoveryFlix on a desktop screen size.

About

DiscoveryFlix is a responsive online movie database created to allow users to browse films, sort through different categories on the home page, view real time data, and add titles to their favourites page. This app was created using ReactJS and utilizes the TMDB API to pull the movie overview, poster, ratings, and even cast information!

Roles

Front-End Web Developer, Web Designer

Toolkit

Goals

  • Successfully pull TMDB API data into our app to display the movie’s current title, release date, rating, and main poster.
  • Ensure the site was responsive between 320px and 1980px.
  • Allow the user to favourite films using local storage.
  • Create a sort feature on the home page to display a list of 12 upcoming, popular, top-rated, or now-playing films.

Planning

This project was created using ReactJS, in a small team of 3. From the start, we wanted to ensure that the interface was clean and uncluttered. Our first step was to review examples from past students and research current movie database's to discover what we liked or didn’t like.

We started creating our style guide by choosing a color palette and discovered a hero image that was perfect for the main page. This led to wireframe creation, and finally high-fidelity mockups.

Development

When it became time to code we broke up the site into tasks that we would each complete. My main objectives were to set up the initial call to the TMDB API and gather the information that we would display for each film. After the information was displaying I set up the favourite functionality that allowed users to select their favourite films and save them on a page using local storage. I also assisted in styling the landing page, individual movie page, and the favourites page. Once the site was complete we came together to test for bugs, and finalize the web application.

Positively Fit Portfolio

Contact

I’m looking for a fun team to join and would love to chat with you about how I will be an asset to your team!