This page is a work in progress.You can help improve it. →

Music Madness

For tonight, I want you to show off what you favorite music is. You will be creating a multiple page app, using react-router.


  • Create a SPA, with a few pages
  • Deploying your website


  • Build a website that has 4 pages.
    • One landing
    • One page for your each of your top three favorite bands.


degit $GITHUB_USER/react-project-template MusicMadness

Explorer Mode

  • Add react-router-dom to your project.
  • Create a Landing page that displays a short description of all three of your bands
  • Build 3 band pages, each on their own URL. These pages should have a
    • a band picture
    • band name
    • latest album information
  • Each page should have a navigation bar that allows the user to browse from page to page
  • Deploy your site

TIP: for Explorer mode focus on getting the router set up and linking up the pages to each other.

Adventure Mode

  • Add a JSON file to your application containing data about bands
  • Use information in the URL to determine the band to render (from the data in the JSON file)

Epic Mode

  • Integrate with API. This API has many features. Go crazy, the sky is the limit.

Additional Resources

© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.