Tuner Front-End

Getting Started

• keep the backend running, open a new tab
• cd to the front-end directory
• npm i
• touch .env
• add the correct environmental variables
• npm start
• npm test to run cypress tests

Note: Remember to git add, git commit and git push regularly

Using the Tuner API that you built, you are going to create a frontend-only app.

Don't forget to keep your back-end API running during this build/

Nav Bar

At the top of your app you should have a navigation bar.

• It displays a links to the route (/songs) at the top of the page.

Your app should also include the following routes:

---

/songs

• Displays a list of song.title, song.is_favorite, song.artist and song.time that are clickable to take the user to /songs/:id IMPORTANT - be sure it goes to the song's id NOT the array position. Since we are now using a database you should use the id.
• Has a button that takes users to the /songs/new view

Inspiration

IMPORTANT

Your page should

/songs/:index

• Displays the details of each song

  • name
  • artist
  • album
  • is_favorite
  • time

• Displays two buttons

  • back, takes the user back to the /songs view
  • delete, deletes the log and takes the user back to the /songs view

• button for edit - which takes the user to the edit form for this song

Inspiration

/songs/new

• Displays a form with the following inputs and appropriate labels:

  • name (text)
  • artist (text)
  • album (text)
  • is_favorite (boolean)
  • time (text)

Inspiration

Delete Functionality

Make this functionality available on the show page

Edit Functionality

Make a link to the edit form on the show page

• Add an edit route /songs/:id/edit
• Add an edit form that is pre-filled with the log to edit

Inspiration

Bonuses

• Style the app
  • Look into the holy grail layout
• It's annoying to have to use the edit form in order to update whether a song is_favorite or not. Make the star ⭐️ clickable from the Index page to toggle the value (both front and back end)
• Use react-bootstrap
• Use react-transition-group to transition between pages Demo
• write your own tests addtional tests for any new features you implement
• add a 404 page
• add functionality that when a user presses the delete button a confirmation appears first