Functionality

booktoons is essentially a website that allows readers to type in a name of any book they are currently reading along with their top 3 favorite music artists and the site will automatically generate a playlist for your reading session based on the book and musical preferences. This was accomplished through the use of many APIs such as the Google Books API which pulls the book's description, the IBM Watson API which scans the book description and locates keywords that evoke a certain overall "mood/tone" of the book, as well as the Spotify API which gives information on various aspects of a song (ex: energy, valence, tempo, etc.) and allows access to the entire music catalogue on Spotify.

Branding

Our team decided on the name "booktoons" as a way of combining reading and music through "book" and "tunes". We decided on the spelling of "toons" as oppposed to "tunes" to create symmetry with the double "o's" and to create a more playful name overall.

Project Design

As the lead designer on the team, I decided to go for a more minimal and simplistic design given the timeframe for the project, however still being able to encapsulate the themes of music and reading. The logo is made up of two eigth notes where a book spine serves as the beam connecting the two notes. The overall color palette was also kept simple, using neutral colors such as cream and black with a muted green accent color to add a touch of playfulness. The project design and wireframes were also kept simple and straightforward, to avoid any clutter and only keeping what is essential to the functionality and focus of the website.

Building Process

To start off with the project, we first figured out all of the APIs we would be using as well as the tech stack. We decided on the Google Books, Spotify, and IBM Watson APIs. From there we were able to set up the environment including a Github repository and Figma workspace for the team. I mainly worked on creating the design system for this app as well as developing the front-end. The front-end of this project was built with React and the back-end was built with axios, node.js, and express. Once all of the wireframes were created and development was complete, the project was deployed using Github Pages.

Accomplishments

Our project, booktoons, was chosen as a Hackathon winner and as a group of first-time "hackers" we are extremely proud of everything we were able to achieve in the span of a weekend. In the short amount of time, we were able to build a functional, and aesthetically pleasing website that we were all happy with at the end. As a team, we also learned a lot, not only improving all of our technical skills but also on working closely with a team in a high pressure environment. It was also our first time using node.js and express as well as using React on a more involved level, so I am extremely impressed by how we were all able to pull this off with some encouragement from each other and help from Stack Overflow (of course).

Future Steps

We believe there is a lot of potential for booktoons to continue to develop and become an app that is widely used by readers everywhere. We received lots of positive feedback from friends and users and people looking for this to become part of their reading routine (there's nothing more exciting than finding new music). As for the website itself, there are still many bugs to iron out and improvements to be made. For example, getting rid of duplicate search results, further refinement for searches, shorter loading times, and addressing edge cases. Additionally, it would be nice to introduce more features to the website such as drop-down options, search suggestions, as well as taking the website "playlist" and directly creating a Spotify playlist for the user to add to their library.