Bloc Jams is the first React Single Page Application (SPA) I built while going through my apprenticeship at Bloc. It is an SPA for albums and music that uses React Router to create a responsive page that also works on mobile devices. First, I built the basic routes with React Router. Next, I built up the functionality of the components controls using React. Finally, I styled the application using bootstrap and css. Through this first SPA build I learned about managing state and props, while building a responsive webpage.
- React: Javascript front-end library for UI (user interface) component rendering
- React Router: State based routing for React applications
- Bootstrap: Mobile responsive styling
- Created boilerplate using create-react-app
- Set up git repository
- Incorporated supplied music and image assets
- Added react-router as a dependency
- Constructed routes for landing, library, and album
- Generateed links for landing, library, and album
- Created general components (imports and exports) for Landing, Library, and Album
- Incorporated selling points with titles and descriptions for site landing page
- Included album data (Using static album data, rather than API JSON for now) and set to state
- Edited library to be a class with albums mapped out.
- Added route for individual albums with URL and passed parameters to Albums component
- Configured albums to be links using react-router-dom
- Imported albums from source data and created album as state
- Added album information layout in component
- Mapped song information to table with track, title, and duration
- Built audio component from source data
- Added play and pause functions with set track function called and assigned to click function
- Set up click function for song component
- Generated Play Bar class component and built up player buttons
- Implemented previous and next click functions to Album component
- Set up click functions (play/pause, previous, next) for Play Bar component
- Added volume and time slider functionality
- Formatted display of time for current time and time remaining
- Incorporated Bootstrap to for responsive styling integration
- Added final display styling across application
Steven Thomson is a Fullstack Developer who recently transistioned back to the U.S. If you would like to contact him:
Thank you to all of the artists who make their artwork availabe to share. Check out the links below to find out more about the artist's whose images were used in this project.