Designed and developed by Phil Berdecio, Aryn Parks, and Erik Pedersen during a one-week sprint in late summer 2022.
FILE UNDER: MERN stack, Spotify API, web apps, sprint, paired programming, collaboration, random generators, playlist generators, Halloween
TECH STACK & DESIGN TOOLS: HTML, CSS, JavaScript, Express, Node.js, React, MongoDB, Mongoose, Figma, Adobe Illustrator, and Photoshop.
Incantations is a Halloween-themed app that allows Spotify users to generate a playlist automatically by entering a group of “magic words” of their choosing. Users can also search for individual tracks and play them in the app.
The user—ideally a Halloween or Samhain enthusiast—lands on the app’s Homepage, where they are prompted to sign in with their Spotify credentials. When they click on “Sign in with Spotify”, they’re redirected to an Authentication Page where they log in. Once logged in, they’re redirected to their Dashboard, which features a dynamic playlist generator called Incantations. The user is prompted to enter a spell or incantation which will generate a playlist for them by matching song titles that contain keywords from the input string. Upon creation, the user's new Incantations playlist will appear in their profile as a public playlist: the spell they entered is now the title of the playlist and the playlist description reads: "Created over a piping hot cauldron with the Incantations for Spotify app 🪄".
This app uses the Spotify API
https://developer.spotify.com/documentation/web-api/
The data responses from this API are too large to reproduce here. Information is linked here: https://developer.spotify.com/documentation/web-api/reference/#/operations/get-track
The following libraries were essential to making Spotify's API more accessible and comprehensible. Many thanks to all the creators and contributors involved:
- Spotify Web API Node: a Node.js wrapper for Spotify's Web API.
- React Spotify Web Playback: a simple player for Spotify's web playback.
- Stopword: a module for Node.js that removes stopwords ("a", "and", "of", etc).
- Trickster: an open source font designed by Jean-Baptiste Morizot; released by Velvetyne Type Foundry (2017).
- We've created custom playlist cover art, which will be posted to each new playlist as it is created.
- Add media queries and break points for a more responsive site design.
- Create a component that shows users all other public Incantations playlists after they've created their own.
- Allow users to stream their playlist in our app instead of having to redirect to Spotify.