- Fork this repo
- Clone the forked repository
cd
to the directory where you cloned itnpx create-react-app tuner-front-end
npm start
to start the react app onlocalhost:3000
Note: Remember to
git add
,git commit
andgit 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/
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:
- Displays a list of
song.title
,song.is_favorite
,song.artist
andsong.time
that are clickable to take the user to/songs/:id
IMPORTANT - be sure it goes to the song'sid
NOT the array position. Since we are now using a database you should use theid
. - Has a button that takes users to the
/songs/new
view
IMPORTANT
Your page should
- Displays the details of each log
- 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
- back, takes the user back to the
BONUS
- button for
edit
- which takes the user to the edit form for this song
-
Displays a form with the following inputs and appropriate labels:
- name (text)
- artist (text)
- album (text)
- is_favorite (boolean)
- time (text)
- Add an edit route
/songs/:id/edit
- Add an edit form that is pre-filled with the log to edit
- Style the app
- Look into the holy grail layout
- Use react-bootstrap
- Use react-transition-group to transition between pages Demo
- write your own tests
- add a 404 page
- add functionality that when a user presses the delete button a confirmation appears first