teaching machines

CS 347: Lab 23 – Dukebox

November 29, 2021 by . Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your files into Crowdsource in order to receive credit.

Task 1

Your task is in this lab is to create a multi-page client for a music streaming service. The client has three pages:

Clicking on an artist takes the user to the albums page. Clicking on an album takes the user to the tracks page. To keep this exercise manageable, your client will not actually play any music. Extending it to really play music is something to do when all the homework’s turned in.

Create a new React app and strip out the boilerplate code as you have done in the past. Install these helper libraries: react-redux, react-router-dom, and redux-thunk.


Add a component for each page. Initially, just have each component render a heading that clearly identifies which component is visible.

Choose which page is displayed using the Router library. Ensure that you can visit each page by manually adjusting the path.


Now create a global Redux store that holds the model behind each page. Ultimately you will fill this store with data you pull down from a web service. But don’t start there. For the moment, pre-populate your store with this initial state:

const initialState = {
  artists: [
    'The Album Leaf',
    'Library Tapes',
    'Nils Frahm',
    'Ólafur Arnalds',

  // These a Balmorhea's albums...
  albums: [
    'Rivers Arms',
    'All Is Wild, All Is Silent',
    'Clear Language',
    'The Wind',

  // These are the tracks of Rivers Arms...
  tracks: [
    'San Solomon',
    'The Summer',
    'The Winter',
    'Greyish Tapering Ash',
    'Baleen Morning',
    'Barefoot Pilgrims',
    'Theme No. 1',
    'San Solomon (Reprise)',

Have each component pull out the relevant data from this store and display it in lists. Make each artist a Link to the albums page, with the artist passed in as a parameter. Make each album a Link to the tracks page, with the album and artist passed in as parameters.

Web Service

Instead of pre-populating the initial state, pull down the data using thunk creators that call fetch. You are encouraged to implement this by following these steps:

Once a fetch finishes and dispatches a Load* action, the store will be updated by the reducer. Any component that has called useSelector to pull out the changed state will automatically re-render.


The next step of your learning is to complete the following tasks:

See you next time.