React Film Festival Aplication

The aim for this project was to build a single page application using React for any film lover wanting to attend a film at the New Zealand International Film Festival. The application would be intuitive to use and would display meaningful data from an API in an easily understandable representation. The ideal outcome for this project is to increase audience numbers by bringing in new customers as well as ensuring that customers who have been before will return as many times per year, each year. We will achieve this by making it as easy as possible for an audience member to find information and attend a screening.

Check out the repository.
UX Process

What would be the point of this app if it did not do the one thing it set out to do? The number one goal was to help people find information efficiently and easily without fault therefore thoroughly going through the UX Process in detail was especially significant. To gain information I practiced multiple research techniques. An online survey was sent out and I individually interviewed a selection of regular festival goers to find out the culture of the festival and its attendees. I completed an Ethnographic Field Study where I went to one of the main cinemas and sat in on a film to experience what the step-by-step process of going to see a NZIFF film was like and learn more about the target audience. I then broke down the research to discover the target audience and what the actual problem was that my application was going to be solving. From my research I was able to create a User Scenario and develop a UML Diagram for the system.


I have done extensive research into how I will be displaying the data throughout the app. Being a placefinder app for the cinemas I want to have a main focus on maps as this will help massively my user scenario as they are looking for a quick and simple way to locate their closest cinema venue. I plan to make the main focus of my index page a map of all the cinema venues as well. I created a lo-fi prototype so that I could go out and test on my target audience and multiple changes were needed to develop the app into a more intuitive version of itself. It failed the first round of testing, which was a good thing as it helped point out the issues and what needed to be fixed in the second iteration. Once the design was improved and passed the following round of user testing these were turned into hi-fis where colours, fonts and imagery was added.


To ensure code consistency and quality a Javascript style guide and best practices document was created. As this was a team project we approached our project with the Agile methodology. This was accomplished by using a KanBan/Backlog, daily morning stand-up meetings and weekly sprints. We worked on individual branches of the code that we had been delegated and would push to the master branch when a good block of code had been completed. This project was built on React with a node server that we created while the data was rendered on the app interface after an AJAX call was made. We had to look at the Minimal Viable Product to make the deadline but there are improvements I would have loved to have made. I would have incorporated more JSON data, such as cinema information. The map could be more dynamic and immersive by showing a users location as well as the route to the desired cinema. I would have loved to incorporate categories, filters, searching as well as user reviews and ratings for the films.