Bloc Jams is a my first React SPA that was built as part of my curriculum through Bloc. It is an SPA for albums and music that uses React Router to create a responsive page that works on mobile as well. I started out by building the basic routes with React Router. After that I built up the functionality of the library, album, and music player controls using React. The page was then finally styled through the use of Semantic UI - React. This was my first time working to build an SPA completely with React. It was a learning experience in managing state and props, while building a responsive webpage.
- React - JS library to build frontend
- React Router - Built state based route for SPA
- Semantic UI - React - Built styling for responsive mobile site\
FullScreen Views
Mobile View
- Create boilerplate with
create-react-app - Create git repository
- Add music and image assets
- Add
react-routerto app - Create routes for landing, library, and album
- Create links for landing, library, and album
- Setup components (imports and exports) for landing, library, and album
- Added selling points with titles and descriptions for site landing page
- Added data for albums (Using static album data, rather than API JSON for now) and set to state
- Set up library as a class with albums mapped out.
- Added route for individual albums with URL and passed parameters to Albums component
- Set up albums as links using
react-router-dom
- Imported album from source data and created album as state
- Added album information layout in component
- Mapped song information to table with track, title, and duration
- Created audio component from source data
- Added play and pause functions with set track function called and assigned to click function
- Added click function to song component
- Added Play Bar class component and built up player buttons
- Added previous and next click functions to Album component
- Added click functions (play/pause, previous, next) to Play Bar component
- Added volume and time slider functionality
- Formatted display of time for current time and time remaining
- Added Semantic UI to make for easy, responsive, and mobile styling integration
- Added final display styling across all routes
Theran Brigowatz is a Full-stack Web Developer currently out of Seoul, South Korea, but transitioning back to the US. Check him out at the following:
Made with ❤️ and ☕.
Thank you to all of the great artists out there who make their artwork availabe to share. Links to the artists for the photos are from below.