Getting Started

Using SPOTAPARTY is easier than you think.

01

Open the app

Simply navigate to https://app.spotaparty.com.


02

Log In

Use your Spotify login credentials to get in. Note: in order to Create a Party you will need a Premium subscription.

03

Create a Party

Click the Party tab, then choose Create a Party and then give it a name.

04

Invite Your Friends

Click the hamburger in the top left, and choose to Show Party QR Code or Share the link socially.

05

Search and Vote

You and your friends can now search for tracks to queue up and vote on. Songs with the highest vote total will be played next.

06

Lets Get This Party Started

The party creator can choose to start the party when ready. Tracks can also be paused and skipped by the party leader.

About

My name is Kyle Henning. I am a sophmore software development major at Grand Canyon University. I decided to spend my summer learing some new technologies and spotaparty is the result.

Technologies

Requirements

Anyone with internet access can participate in the app using a free Spotify account, however, only those with a premium Spotify membership can create a party. Simply open a web browser on any device or computer and navigate to http://app.spotaparty.com.

About This Project

The architecture of this app was inspired by the Jamstack video I watched and highly recommend to anyone interested in programming.

User Interface
I had some previous experience with HTML, CSS, javascript, and jQuery. I mainly was using these older technologies to play with the Spotify API. I also had been playing with Vue 2 with Vuetify to create a responsive website for the law office I worked at last summer. Version 3 of Vue was recently released and I was interested to try it out. Unfortunately, Vuetify had not released a compatible version of their UI framework yet so I had to find something else. Eventually I settled on using Ionic for the UI framework. There were some odd things about it, but I think that is to be expected since it is supporting many different frameworks like Angular, React, and Vue. Overall, I am quite happy with how it turned out. Using the same components it will render the UI according to the device viewing it, so Android users get an android look and feel, while iPhone users get a UI experience in line with other iPhone apps.

Progressive Web Apps

Progressive Web Apps (PWAs) allow a website to function like a normal app on your phone by allowing the site to be "installed" on your phone's desktop. To install SPOTAPARTY on iOS simply open https://app.spotaparty.com up using Safari, click the icon with the arrow at the bottom of the browser, then choose "Add to Home Screen". For now, SPOTAPARTY will be available in this format. Eventually I may choose to utilize the ionic capacitor runtime to allow the app to be added to the app stores.

Database

The storing of the party information which includes the users and songs in the queue and their votes needed a database. This app uses the Google Firestore database which allows for the UI to recieve realtime updates to all the apps listening to it, so the instant a song is queued, or voted for, all the users in the party will see it. There was very little effort needed on my end to make this work. If you are interested in learning more, visit https://firebase.google.com/docs/firestore.