Sherwood Seabrook

Project Overview

This group assignment was my term project for App Development 2 at BCIT. Our team consisted of 2 designers and 3 developers. Our task was to develop a mobile app in React Native that requests data from a RESTful API. Our idea was 24 FRAMES, an app where users could search trending movies, add them to a watch list, rate them and write reviews.

Design Handoff

After extensive brainstorming, our design team generated a detailed prototype in Figma, provided with style guide and documentation regarding libraries and UI kits that had been employed. The logo and other design elements were provided via our shared folder.

Project Setup

To begin development, we created a repository for our project and initialized a new React Native project. Node Package Manager, Expo CLI and Android Studio were used to set up our development environment. The design required 2 navigation components: A Stack Navigator would handle the sign-up, log in and onboarding screens, and the Tab Navigator that holds the app screens would be nested within the Stack. After installing the necessary libraries and assets, I set up boilerplate files for all of the screens required by the prototype. The most important screens in the expected user flow are the Home Screen, the Search Results Screen and the Movie Detail Screen. Also required are the Movie List Screen, Search Screen and User Profile Screen. Components for the Movie List Item, Genre List Item and Review List Item were also created.

Development

Taking the lead developer role, I delegated the Sign-up/Log in screens and the Onboarding screens to my co-developers Marlowe and Amanna, respectively. I first tackled the Home screen, where an API request would return the top 2 trending movies for our top section, followed by a 2-column list of image cards representing the various genres in our database. For this I created a data array that contained the genre IDs from the TMDB API, where we are sourcing our movie data. This way I could pass the genre ID to another API request that would return a list of trending movies filtered by genre, on our results page. The results page is just a Flatlist component that displays a list of movies from the API based on whatever parameters are passed from the navigation route.