Description

I built a web app to use when I host karaoke in my building's theater room. This is not a tutorial, just an explanation of my project. I would, however, be happy to answer any questions or help anyone solve problems they may have when creating a Rails 7 app for hosting on Heroku.

Requirements

1) For my own setup the laptop running the karaoke equipment uses Chromecast to display the karaoke video on a large projected screen, and bluetooth to play the music to a karaoke speaker with two microphones. The app needed to be accessible from each guest's phone for easy queueing of songs, therefore hosted and not just operating locally on the laptop running the karaoke equipment.

2) The app needed to queue songs with a user-input URL pointing to the location of a video karaoke version of a song. When a performer clicks the URL of the next song from the laptop, the app needs to mark that song as finished. I also anticipated that songs would need to be skipped/postponed in case a performer was not available in the moment to perform their song.

3) A single user was sufficient for my own purposes, and I opted out of a traditional sign up to avoid managing users who might randomly access the hosted web app. This also allowed me to skip a lot of work that would be needed for a publicly accessible app, like validation of URLS or updating each logged in device's view with an implementation of ActionCable and Redis on Heroku.

Stack

I used Rails 7 and Postgres for hosting on Heroku with minimal Javascript and Sass. I also used Devise, Haml, Html to Haml, and RSpec.

Approach

I kept things as simple as possible in order to complete the project quickly. In all, it took me about four hours.

1) I ran Rails new, set up initial gems, initialized a Git repository with a remote connection, and prepared the app for Heroku.

2) I implemented basic CRUD for a Song with additional features to finish a queued song upon click of its link and skip of a song upon the click of a button.

3) I installed HAML and ran html2haml to convert all existing ERB files, based on a strong preference for HAML over ERB. I also use HAML on a daily basis professionally.

4) I used Sass for styling of the app. I kept the overall styling pretty simple to allow for thorough styling of states including active, hover, etc and usage of SVG icons.

5) I set up Devise to handle sign in of a single user. Devise will allow for future features, like using the invitable option to invite other users to the app.

6) I used RSPEC for minimal initial testing of CRUD for songs.

7) Last, I used ZeroSSL to create my own certificates, added them to the Heroku app, and set up a CNAME through my own domain provider in order to move from the Heroku app URL to www.karaoke.jaredharbison.com.