Jukebox Front-End Lab Exercise

Introduction

Welcome to the Reactville Jukebox! In this lab, you’ll create the front-end of a collaborative, community-driven jukebox application. You have the option to design the user interface either as a dynamic dashboard with conditional rendering or by using React Router to manage different views for each function. Additionally, you’ll complete the jukebox vibe by implementing a feature to display the currently playing track.

This lab is designed to give you practical experience in building a single-page application (SPA) using React and fetch to interact with the RESTful API you developed in the Express API - Jukebox Back-End Lab. As you build out the functions for creating, reading, updating, and deleting (CRUD) tracks, you’ll see how your front-end interacts seamlessly with the back-end, bringing the digital jukebox to life.

Minimum requirements

You have the power to decide how to implement the UI in this application. Depending on your chosen UI structure, the requirements will slightly differ. Below are the functionalities your application must support, with notes for both UI approaches and the new requirement for tracking the current track. Choose only one path!:

Feature Dashboard Requirements React Router Requirements
Read all tracks - Build a TrackList component.
- This component will be a child of the App component and should always be visible.
- Display the details of every track in the database in this component.		 - Build a Home component.
- The Home component will be a child of the App component and be shown on the / route.
- Build a TrackList component.
- The TrackList component will be a child of the Home component.
- Display the details of every track in the database using the TrackList component.
Create a new track - Build a TrackForm component.
- This component will be a child of the App component.
- It should only be visible when a user clicks an Add New Track button above the TrackList component inside the App component.
- This component will display a form allowing users to add a track.
- When the user submits the form, the track should be added to the database. They should also see the new track in the TrackList component, and the TrackForm component should be hidden.		 - Build a TrackForm component.
- This component will be a child of the App component and be shown on the /add-track route.
- The user should be able to navigate to this route by clicking an Add New Track button above the TrackList component inside the Home component.
- This component will display a form allowing users to add a track.
- When the user submits the form, the track should be added to the database, and they should automatically be redirected to the / route where they will see the new track.
Update a track - Add an Edit button under each track in the TrackList component to allow the user to select a track to edit. When the user selects a track to edit, the existing TrackFrom component should be shown.
- Refactor the TrackForm component so that it can also be used to edit an existing track.
- When the user submits the form to edit an existing track, it should be updated in the database. They should also see the updated track in the TrackList component, and the TrackForm component should be hidden.		 - Add a /edit-track/:trackId route, which will show the existing TrackForm component.
- Add an Edit button under each track in the TrackList component allowing a user to navigate to this route. Ensure that the unique id for a track is passed in the URL.
- Refactor the TrackForm component so that it can also be used to edit an existing track.
- When the user submits the form to edit an existing track, it should be updated in the database, and they should automatically be redirected to the / route where they will see the updated track.
Delete a track - In the TrackList component, add a Delete button under each track.
- When the user clicks this button, the corresponding track should be deleted from the database and should no longer be shown in the TrackList component.		 - In the TrackList component, add a Delete button under each track.
- When the user clicks this button, the corresponding track should be deleted from the database and should no longer be shown in the TrackList component.
Currently playing track - Build a NowPlaying component.
- This component will be a child of the App component, placed after the TrackList component.
- In the TrackList component, add a Play button under each track.
- When a user clicks a Play button, display the details for the corresponding track as in the NowPlaying component.
- The NowPlaying component should not be visible if no track is playing.		 - Build a NowPlaying component.
- This component will be a child of the Home component, placed after the TrackList component.
- In the TrackList component, add a Play button under each track.
- When a user clicks a Play button, display the details for the corresponding track as in the NowPlaying component.
- The NowPlaying component should not be visible if no track is playing.

⚠️ Please note that this lab does not involve actual audio playback capabilities. It is designed as a UI simulation of a jukebox, focusing on the interaction with a music track database. The features implemented will simulate managing a playlist but will not play music.

Component hierarchy

You can choose between maintaining a single-page flow with components that appear and disappear based on user actions or implementing routing to navigate between different components representing pages. Here is an example structure for each option:

Dashboard style

React Router style

This lab offers you a chance to practice making design decisions based on user experience and functionality requirements. Whichever approach you choose, the key is ensuring the application remains user-friendly and performs full CRUD functionality paired with the Express API.