Formerly known as Bloc-Jams. This is a SPA music player built with React.js from the ground-up. Similar to Spotify. This was the first web app project that I built while undergoing the Bloc curriculum as well as my first introduction to the React library.
- npm – Node package manager
- React Developer Tools Chrome extension – helped with debugging
- Babel – to help enable JSX syntax support
- React Router – to help with client-side page transitions
- Git – version-control
- CSS/CSS Grid/Flexbox – for layout and style
- Ionicons – for icons such as play/pause/etc.
List of features:
- Plays music (of course)
- There’s volume control for all of your volume control needs.
- There’s a player bar with controls for previous track, next track, play/pause
- There’s a time control slider in case you wish to propel yourself forwards or backwards in time.
- CSS animations because they’re fun and creates a nice moment for the user (and myself in the making).
You know you love to code when time just flies and you’re so focused on what you are doing that you didn’t realize how late it was getting (“It’s 2am already! I have to get up in four hours!! Eeeek!!!”). I’ve spent many a nights burning the midnight oil on this project. There were sooo many firsts for me and tons of problems that I had to solve which was very difficult to step away from (hence the late hours and lack of sleep). But I loved every minute of it! There were times I would get stuck for hours working on a certain feature which was painful to say the least. But once I got it to work, boy was it rewarding!
If you’d like to see it in action or go behind the scenes you can view it here:
Artist Label Animation