Downbeat

https://downbeat-app.herokuapp.com

Downbeat is a Spotify inspired web application streaming music player. Using Ruby on Rails, React, Redux, and PostgreSQL, this application was designed and built from the ground up in 10 days.

Features

• Secure user authentication
• Create, delete, and edit your own playlists
  • Add and remove songs to playlists
• Follow other playlists
• Search for songs, artists, albums, or playlists

Secure User Authentication

• Uses BCrypt to store secure, salted password digests
• Handles logging in with session tokens
• Includes a guest account for demoing purposes

Continuous Play

• Play songs and navigate around the site without stopping playback
• Go to the next or previous song
  • Clicking the next button goes to the next song if there are more songs in the queue, otherwise it does nothing. If repeat all is on, it will play the first song in the queue again.
  • Clicking the previous button after 4 seconds has elapsed restarts the current song for a more intuitive UX
• Seek playback time by dragging or clicking on seek bar
• Adjust volume by clicking on mute button or clicking and dragging volume bar
  • Volume bar remembers it's volume before it was muted and returns to that volume after unmuting
• Repeat and shuffle queued songs
  • Repeat one song
• Displays current song, artist, and album art

The audio player was implemented using Howler.js, a javascript library for web applications. Because Howler has no UI features, the UI for the player was implemented mainly using jQuery, HTML and CSS.

The ability to drag the seek and volume bars was implemented using React Draggable, a wrapper library that uses CSS transforms to allow DOM elements to be draggable. Combined with Howler and jQuery, I was able to give the full UX for the volume and seek bars.

  const fullWidth = $('#seek-bar').width();
  const barWidth = parseInt($('#sliderBtnSeek').css("transform").split(',')[4].slice(1));
  $('#progress').css('width', barWidth);
  const seekTime = (barWidth / fullWidth) * window.sound.duration();
  this.setState( { deltaXSeek: barWidth } );
  window.sound.seek(seekTime);

Playlist CRUD

• Create, Edit, and Delete Playlists

• Add and Remove Songs through dropdown menus on each song
  • Adding songs brings up a modal that allows you to choose which playlist to add to or create a new playlist.
• Songs are kept in the order that they were added in playlists.
  • Album songs are kept in track number order.

Follow other playlists

• Follow and unfollow other user playlists and access them immediately via the left nav bar.
• Users cannot edit or remove other users' playlists.
• Users cannot follow their own playlists.

Search

• Displays all songs, artists, albums, and playlists that match the query.
• Instant search works on key presses, no need to press enter or click a button.
  • Search index auto updates based on query.
• Clearing the search bar and clicking somewhere else navigates you back to where you were before searching.
• React components for song lists, album lists, and artist lists were reused for the search index. Song lists were reused in both album detail and playlist detail views.
• Search uses lodash.debounce to ensure that no race conditions exist.

If a user types quickly while searching, this would cause slow, early search results based on the beginning of the query string to be displayed instead of the full query string. This is solved by delaying ajax requests until a specified amount of time has passed since the last request.

this.dbSearch = lodash.debounce((query) => this.search(query), 250);

Enhancements

• Ability to play an album or playlist by clicking its icon
• Add more styling to album and playlist icons
• Add loading spinner
• Let users see their queue and add individual songs to the queue
• Let users friend other users and see all of their playlists
• Let users share links to songs, albums, or artists
• Add notifications after changing playlists, following playlists, friending, or sharing