week 05 - day 01 - music madness - SPA

[Schnorschel]

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.

Objectives

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

Requirements

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

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. These pages should have a
  • [ ] a band picture
  • [ ] band name
  • [ ] Latest Album information
• [ ] Each page should have a nav 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

• [ ] Instead of hard coding the URL, try to use parameters, components and JSON file to supply navigation for your site.

Epic Mode

• [ ] Add integrations from Last.fm API. This API has a bunch of features. Go crazy, the sky is the limit.

Additional Resources

• npm react-router-dom
• yarn add react-router-dom

[Schnorschel]

Implemented Explorer and Adventure Mode:

• Created data in local JSON file.
• Placed images in sub-folder "images" inside "public" folder.
• "Band" pages are dynamically created.

https://github.com/Schnorschel/music-band https://music-band-schorschi.netlify.com