The Future!
Hope you'll see some more web apps from me soon! 💾
Assessment for third term @ Hyper Island
For this project I decided to make a smaller web application for DJ's using JavaScript and the Spotify API.
I choose to work with the Spotify API because Spotify is my most frequently used application on all my devices. The idea of being able to create tools for services that I use on my devices is great source of inspiration, I can see how I can benefit from it in the future, for example discover more music with less interaction.
Because I did not have any experience with the Spotify API, I decided that I wanted the project to be very minimalistic - a goal of mine was to make something very simple, but execute it as good as I possibly can, with all the skills i have acquired during my time at Hyper Island.
Essentially, I wanted this project to be a culmination of my learnings.
*Get your Spotify Application ready! 💥
The basic idea for this web app stemmed from being able to present more information about the song that you are listening to, than Spotify provides in their own applications.
Within Spotify you can see Similar artist, Records and Bio. But what I wanted to present, was the track analysis that Spotify collects on all tracks, but does not show.
I wanted to help DJ´s know what BPM and Key the song is in, so they can find and test other songs that match and thus create a playlist that is cohesive in tempo and melody - a bonus is also that my web app shows you the record label that the track is from, so you can explore similar artists from the same record label.
Please try the application in the link below!
(You will need to have a Spotify account, all the sent data is between you and Spotify.)
Links:
*Lets start the assessment 💥
For this project I began with making a site in Notion - see the link below - this is where I collect all the information about the project and where all the planning stages appear.
I like to have everything in one place which Notion is very good at (compared to Google Docs), Notion has also been the preferred way of keeping notes for the previous projects I have worked with.
To remember the focus of the project, I listed the brief on top, as well as the main functionality, goals and my design in Figma - where I did all the design - I also created a Task/To-Do list to keep track of everything I need to get done and a database with relevant links and data.
The plan was to start with the design so I have a visual demo that I can follow, I wanted to make the idea less abstract than if I keep it in my head or have it written in words, the development is much easier when the design and functionality are already set.
After the design was done, I started to code the very basic "engine" of the project, essentially just getting any information from the API - when I succeeded getting the data i wanted from the API, I started to print it on the website and then began with the CSS and style of the app.
As soon as i felt I had a stable MVP ready, I started to troubleshoot and user testing, so that I can extract and fix as many bugs as possible - this ongoing during the whole coding phase and is still ongoing, I do not believe perfect code exists.
The last step of my developing plan was to add more functions, unfortunately that is still being under production - what I am trying to do now is to add a list of recommended tracks that match the track you are listening to in melody and tempo - to alleviate even more work from the user.
Links:
This goal was incorporated into my planning phase.
Because I am one person in this project with a deadline of 25th September, my time planning was very simple:
1. One week to come up with a project and setup a structure around the project.
2. One week to develop the design.
3. The rest of the time follows an agile type of developing, keeping that loop of coding and troubleshooting - I tried to do as much as possible before the deadline and my minimum requirement was to have a MVP done with clean, dry and well though out code.
4. If the MVP was done, then I could start to add another function.
The resources was gathered during the creation of the Notion page in the database table and the techniques/tech stack was already decided during the start of my project.
Please take a look in my Notion site below for more detailed understanding of my planning.
Links:
I think these last two course goals are very hard to interpreter and should be rewritten into something much clearer and understandable - I think course goals should be clear and not too abstract, otherwise they will not be a source of inspiration and something to aim for, rather they will confuse and throw you off. I know I am not alone in this criticism.
With that said - I am summing both of them into one and reinterpreting them.
I think I achieved my goal of this project becoming a culmination of everything I have learned during my time at Hyper Island. If I reflect over all the techniques I have learned, the only ''skill'' I did not use in this project was the ability to learn new tech and develop with tech that I have not used before, an example would be to incorporate a backend with Node in this project without having used it before.
But I did not want to spend time creating something that was "glued" together, I wanted to apply what I know and write all my code from scratch without using tutorials or other peoples code.
A must for me when incorporating tech that I have not used before, is the necessity of using tutorials and trying several different solutions - without knowing its consequences - for me to troubleshoot or clean up the code is not possible without a clear base knowledge that take some time to acquire.
When it comes the code in this project, my goal was not to build a "house of cards" if you will, my goal was to build a "bunker".
I think that the creation of this project was a great experience, because it gave me a clear vision of what I have learned during my time at Hyper Island. To create something I want to use for myself with tech that I use in my daily living made it a lot of fun and inspiring, the project has given birth to several new ideas that I hope to be able to create in the future as well as a confidence to create things for myself to simplify my own living.
(Something that I created on the side of this project was an automated system for my economy using CSV files exported from my bank, due to sensitive data I can not show this. Essentially it groups expenses and shows monthly where my money has gone.)
Please take a look at my code on GitHub for a deeper understanding of what I have created during this time.
Links:
Hope you'll see some more web apps from me soon! 💾