Skip to content

mdlpontual/_ezJam_webApp-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 

Repository files navigation

ezJam (with Spotify) 

Create, edit, and listen to your playlists in a more streamlined way. 

This web application was commissioned by a part-time DJ that needed an off-platform tool to help him customize his Spotify playlists while improving the user experience catered to his specific needs.


About ezJam:

In this application, you will find an improved and more focused way to customize your beloved Spotify playlists. Only ezJam allows the user to simultaneously view the content of the playlists while exploring Spotify's music catalog, all at the same time, side by side.

Main Features:

  • Focus solely on songs, albums, and artists for a more streamlined experience (fewer distractions mean better flow and more exploration);
  • Create, edit and delete your playlists;
  • Search Spotify's full music catalog;
  • Select one or multiple tracks at the same time;
  • Use the drag-and-drop feature to add new songs or modify their order;
  • Listen to any song you want in the same platform;
  • Maintain control of your customization by saving or discarding the changes you make along the way.

For more information, chekout the demo video with the following link:
https://www.youtube.com/watch?v=t-3TiMsOU4I

Once completed, you can play the playlists in any Spotify app or share them with just one click.


Technologies and languages used:

  • Spotify Web API;
  • API Integration;
  • RESTful API;
  • OAuth Authenticantion;
  • React;
  • JavaScript;
  • Bootstrap;
  • SASS;
  • Vite;
  • Axios;
  • Node.js (used for API proxying and server-side logic during development);
  • Netlify.

About the project:

The client is an electrician who works with photovoltaic system installations during the week and performs as a DJ at parties on weekends as a hobby, attending mostly birthday parties and small weddings in the countryside. He has been doing this since the 1990s and has used all types of gear technology over the years. Nowadays he has condensed most of his equipment to a laptop, a pair of quality speakers, a portable mixing table, and a Spotify premium account.

Within his Spotify account, he collects a variety of pre-made, battle-tested playlists that he has been building for years, and for every different gig he plays, he always creates new playlists based on the taste and requests of the specific client of the night. Despite being a hobby, preparing these playlists requires him to mix his own collection of tracks with the client's requests and the "adjustments" on the fly during the gig. So he needs an application that helps him prepare for these events alongside the main Spotify application.

The main objective of this new application is to improve the experience of customizing and modifying his playlists outside of the job by solving an old issue that he always had with Spotify's user experience: the fact that you can't see the content of the user's playlists and the searched results from the Spotify library on the same screen side by side. The second objective is to have an off-platform tool to assist and back up the main app during events. During gigs, he will continue to use the official Spotify application on his laptop as the primary tool for playing and visualizing tracks.

Scope of the project:

  • The app needs to work separately and independently from the main Spotify app;
  • Build the UI in a way that the client can see the content of his playlists on the same screen as the search results from Spotify's library, side by side;
  • Imitate the same basic mechanisms and functionalities of the Spotify app;
  • Have a built-in track player;
  • Have vibrant colors with good contrast so it pops on the screen when using it at the same time with the Spotify app, which he uses with dark mode;
  • Allow full control of the customizations by saving or discarding changes to playlists before they are updated permanently;
  • Upload the changes to his playlists automatically and quickly, so he can play or modify them at will when live.

Because the client wanted an off-platform tool, he also wanted to be able to open it on any device with a browser. This would allow him to use it as a backup for playing the tracks in case the main app installed crashes or something goes wrong. With all that settled, it was decided to build the app as a web application using React.


We are developing ezJam with the intention of releasing it for public use once completed. The app's functionality was designed to mimic the Spotify app as an assist tool while adhering to API documentation.

The application is currently in restricted testing mode, and it is in review by the Spotify team for public access. In the meantime, you can check the demo video above or contact me for more details.

About

Create, edit, and listen to your playlists in a more streamlined way.

Topics

Resources

Stars

Watchers

Forks