React Frontend Music App

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.

Technologies Used:

  • npm – Node package manager
  • React Developer Tools Chrome extension – helped with debugging
  • JSX – Written with JSX which is JavaScript expressions with an HTML-like syntax
  • 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:

Hover animation on page transition

Artist Label Animation

Published by lauramariemeehan

Full-stack JavaScript web developer looking for interesting front end development positions in Snohomish and King counties, in Washington state.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s