As part of the Web Engineering course at the UAS we were tasked with creating a web application that offers a REST API coupled to a database, while also using a third-party API. The exercise’s goal was to strengthen our skills in HTML, CSS, JavaScript, and PHP, while also giving us an opportunity to brainstorm for an appropriate idea.

Concept art showing all of the available emotions which are the core of the experience.

My team and I came up with this idea after some others failed to meet the requirements of the exercise. We wanted to tackle a problem that all of us know and experience on a regular basis.

Picking the right movie for the right situation can sometimes be an overwhelming task due to the sheer abundance of options. Because of this we wanted to come up with a solution that makes this process a lot easier, by focusing more on the emotional aspect of watching a movie, rather than assessing the movie’s quality.

We went on to collect a list of basic emotions that a movie might make you feel. These six emotions — amused, sad, excited, scared, inspired, weird — were to be the core of the experience. A user visits the site and is presented with these emotions. They then select one option and can view a list of movies that match this emotion. This list can then be sorted by various criteria, such as release date, percentage of match or when they were added to the database.

Search functionality is using TMDB data. Movies are only added to our own database if they are not already present.

All movies are added by the users. They can search for a movie by its name and then save a rating for it. If the movie is already present in the database only the rating is saved, otherwise all the necessary details for the movie are saved as well. All data is pulled from The Movie Database.

Things I’ve learned

  • Idea Finding
  • Design
  • Development
  • Build Processes
  • Componentisation
  • Immutability
  • REST

I decided to use this as an opportunity to finally learn more about React by using it in a real world project. Setting up the project was a bit of a chore, but it did not take too long for me to fully appreciate React and all its core principles.

A slide I used in the review presentation at the end of the semester showing my appreciation of React and its concepts.

Things like JSX, components, states and props, and immutability quickly went from confusing new terminologies to helpful tools to increase efficiency during programming, but also of the application itself. I plan on working with React a lot more in the future.

Technologies I’ve used

  • JavaScript
  • React
  • Sass
  • PHP

All React code — all JavaScript code, that is — was coded in ECMAScript 6. The ability to rely on classes and things like spread operators to help with immutability were invaluable when creating an application such as this one. Using tools like Gulp or Browserify it was quite easy to get started with all the new language features.

Aside from React the project used Sass for styling purposes and PHP, along with the SLIM framework, for the REST API. The whole technology stack was easy to maintain and set up, which made working on the project very comfortable.

If you enjoyed reading this case study you might want to share it on Twitter, on Facebook, or on Pinboard. For comments and questions, contact me on Twitter.

View more projects