JamSesh

JamSesh is an interactive application where users can visualize data from their personal Spotify account, such as top songs, top tracks, top genres, and even see what song is playing on their Spotify in real time. This is a personal project that was created through the use ReactJS and the Spotify Web API.

Team/Roles

Alexander Ma - Frontend Developer, UX/Graphic Designer

Michelle Deng - Backend Developer

Timeline

9 weeks (July 2022 - September 2022)

My Contributions

1. Designing all the graphics with Figma to fit the "vintage computer aesthetic" that we were going for

2. Wireframing page layouts to discover unique ways for displaying personal Spotify information while keeping user engagement high

3. Translating prototypes into comprehensive code with ReactJS, including the dragging and clicking user actions

Project Source Codehttps://github.com/michelletriestocode/michelletriestocode.github.io

Early Iterations
& Inspiration

Here are the preliminary designs for the different components of JamSesh, created using Figma and iterated on over several weeks before reaching the final product.

Here are some graphics we collected to serve as inspiration for the color, layout, and interactivity of the website.

Features

Current Song

JamSesh will track and display what song you are playing in real-time on Spotify. On top of that, you can utilize the skip and pause buttons on JamSesh, analogous to how it would work on the actual Spotify app.

Top Artists

For this section, I created an interactive image gallery where you can scroll through the top 5 artists and click on whichever one you want to put on the main display screen. On top of that, you can see your top artists from 3 different time periods: last month, six months, and all-time. This functionality works for top songs and top genres as well.

Top Songs

This part of JamSesh was inspired by a retro version of Microsoft Paint. Users can view their top 5 songs and drag them around to create their own unique orientation. This was accomplished by first getting the dimensions of the main container using vanilla JavaScript. I then used the react-draggable NPM library to confine the draggable components and prevent them from being moved outside the main container.

Top Genres

Last of all, you can view your top 10 genres on Spotify, accompanied with visuals similar to what a file explorer looks like. I did this using CSS grids to format the file placement and by looping through the data arrays for the top genres.