Spotify Karaoke App
Project Overview:
This project is a mobile and web application with the expressed purpose of allowing for Spotify™ users to display lyrics and graphics for song karaoke on their mobile and web accessed devices. Allowing users to sign in and access their accounts to use user data as an entry point for currently playing songs. This information will then be used to display relevant lyrics and graphics to the user on their device while Spotify™ plays their song.
Role: Interaction Designer Timeline: June - July 2021
Tools Used: Figma, Android Studio, Flutter, Firebase, Github
Problem Focus
My team was tasked to design and develop an app that implements the Firebase API and Firestore. This was our final group project for CSC4360, our mobile application development undergraduate course. As music lovers, we thought it would be fun to create an app that allows users to login to their Spotify accounts and connect the Spotify API along with Firebase so that users can choose a song directly from their account and sing along!
Solution
An app that connects users with their Spotify account and constructs a karaoke screen so that one can record their own voice on the background instrumentals of their favorite song.
Upon opening the app, the user will be prompted to sign in with an email and connect their Spotify™ account to the app. After authentication, the screen will transition to a home page that allows users to search for their desired song. When the desired song is found and selected, the screen will transition to the graphic lyric display screen.
Contribution
In this group project, I took on the role of creating all the front end design and U/UX implementation. I used Figma to create a prototype for IOS in dark and light mode. My group members chose a mode they preferred, then I redesigned for Android based on the mode they chose to develop in. Using the prototype I made, my group members were able to develop the back end and add functionality to the screens of our application.
After the application was designed, the rest of the group primarily took charge of developing the backend, and, for the purpose of the course developed for Android first, using Android Studio, a lyric API, Spotify’s API, Firebase, and Flutter to add functionality.
Github Link: https://github.com/MAD-in-Demand-Studios/spotify_karaoke
Member List & Roles:
Sam Kim - Integrating lyrics API
Sanjana Bhat - Working on UI/UX implementation
Michael Roussell - Integrating Spotify API
Amrita Nair - Integrating user-sign through Firebase Auth
Steph Olele - Creating Github Repo and set up ReadMe with proposed features
Needs
The project needs some UI design for user feedback features and the functionality behind those features. This includes a way for users to select songs for karaoke instead of just playing a predetermined playlist, a “synced?” button, enabled comments, to add a page for most requested songs, and to add a voice record function to record the karaoke performance.
App Direction
The app could be sold as a stand alone app on the google play store. After this there are plans to add an iOS version and web app version. With the creation of these versions and some marketing. Eventually, with some added features and design upgrades, the app could possibly be sold to Spotify to integrate into their own environments.