Angular Movie App

Build an Angular project around a provided API, in a group of 3

Challenges

1. 1.Display results from the API based on user-selected search criteria.
2. 2.Allow users to mark “favorite” results.
3. 3.Display a list of favorites, and allow the user to remove items from this list.

Research & planning

We started with a content audit of earlier projects and popular movie sites to figure out what our app should be. Then I started concepting, and as team leader I focused on how the project was organized.

Agile

This was our first Angular project, our skill levels varied, and we had a short deadline, so we brought Agile (mostly Scrum) into how we worked.

We held daily scrums when we could to set priorities, and kept a sprint backlog in Trello. On harder tasks we pair programmed, one driver and one navigator, so we could cover each other's weak spots.

Vision

Movie Night lets users filter a big catalog of movies and build a watchlist. We picked the name and design because they fit what the app is for: putting together a quick movie night list with simple filters that match your taste.

Responsive screens

Code

Angular & data flow

The app uses The Movie Database API to pull the data we filter on. Functions in the Angular service fetch from the API's endpoint URLs. That gives us a large list of movies plus their details, genres, release years, and more, and parameters let us turn those into search criteria in the search bar.

To render the data, we used dependency injection to put the service into several components and subscribe to it. Each component could then display the data however it needed. The movie-list component renders the fetched list of movies, and the search-criteria component filters that list by genre, year, and rating.

My first major Angular project

This was the first big Angular project I'd worked on, and I'd only been learning the framework for a couple of weeks. The API was hard to work with, since filtering the data meant writing a lot of our own parameters.

It also made me think fast to hit deadlines. Dependency injection and displaying data looked intimidating at first, but I picked them up quickly. Looking back, I'd like to redesign it and add more features.

I learned a lot, both about working on a team and about Angular.