Skip to content

Latest commit

 

History

History
110 lines (68 loc) · 2.88 KB

README-FE.md

File metadata and controls

110 lines (68 loc) · 2.88 KB
Raw

Pursuit Logo

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
  • 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