WCCI Course Materials

Module 5

RESTful API Creation and Single Page Applications

Weekly Pages

Git Workflow

Feature Branch Workflow

Group Project - Album Collection

Assignment Link

Album Collection

Objective

Our friends at the local soda shop have gotten tired of taken phone calls about their jukebox. After a feature in the newspaper about how cool their vintage jukebox was they have been swamped with requests from jukebox enthusiasts for an album list.

They have tasked us with creating an application that can easily keep track of their record collection and access music by albums or individual tracks. This collection is in a constant state of flux, so it is essential for the users to be able to update the collection and it's elements.

Single Page Application Front-end

We will need to create a front-end application to use their provided API. It should be an SPA that uses JS to build out components that our users can interact with. Use modular JS to create reusable components. This application should allow you to create new albums and songs, leave comments on albums or songs, and delete items.

User Interaction

Our users should be able to add new instances of Album and Songs as well as comments.

Prototype

Relationships

Our user should be able to:

  • access songs from the album the song is on.
  • add albums
  • add songs to an album

User Input Fields

Each entity should have fields the user can interact with:

  • Should have comments with a way to add them

Administrative Front-end

Next we will crate our administrative front-end. It should be an SPA that uses JS to build out components that our users can interact with. Use modular JS along with WebPack to create reusable components. This application should allow you to create new artists, albums and songs, edit details about each of the items after they have been created, and delete items.

User Interaction

Our users should be able to add new instances of all entities as well as comments and ratings

Entities

album

  • title
  • image
  • songs
  • record label

song

  • title
  • link (optional)
  • duration

Resources

Pair Programming

JS

APIs

Mastery

Kata Mastery