Book Toons

Landing Page
Artist Search

Inspiration

When we were brainstorming for this project, we drew inspiration from our shared love for books. The idea to combine books and music comes from the fact that they both complement each other. Reading is based on your own interpretation and creating a story and visual in your mind similar to that of a movie. A good movie typically is also accompanied with a soundtrack that enhances the plot, mood and atmosphere in a way that allows the viewer to have a deeper experience. With this in mind, we decided to create Book Toons as a website that is able to create a personalized experience for casual reading sessions.

What it does

Book Toons is a website that allows readers to search for the title of the book they are reading as well as input their top 3 favorite artists in order to create a personalized playlist based on their personal preferences and the mood and tone of the book. Readers are then able to listen to these curated songs while they are reading creating something like a soundtrack for their reading experience.

How we built it

We started off by coming up with a site map for our overall application in order to define the parameters of our project and also figure out a minimum viable product. We then decided on a tech stack and APIs needed and began setting up the environment for our project as well as a Github repository and a Figma workspace. We also came up with a design system for our project including typography, color, and UI components. From there, lo-fi and hi-fi wireframes were made which served as the main reference throughout the process. The front-end of this project was created using React. The back-end was built with axios, node.js and express and APIs from Google Books, Spotify, and IBM Watson were used. This project is deployed using Github pages.

Challenges we ran into

Since this was all of our first hackathon, it was difficult to go from ideation to completion all in the span of a day. For the back-end, we also had to use Javascript which most of our team is unfamiliar with and so there was some time spent having to learn Javascript as opposed to using Java. Additionally, connecting the front and back end if something that was extremely challenging and effectively utilizing APIs to create a complete application. Due to COVID, our team was also unable to meet at later times at night in person since most classrooms and buildings are closed, so having to communicate over text and zoom proved to be difficult when trying to merge and work together on parts of the code.

Accomplishments that we're proud of

We're proud of being able to build both a front and back end application as well as also putting together a design system for the project in the span of a weekend. There were also multiple small accomplishments that we were all proud of throughout the time that we spent on this project including things such as successful CSS styling (when an element finally moves into just the right spot) and API calls that finally did what they were intended to do.

What we learned

Overall, we learned all learned a lot about our respective responsibilities that we had and picked up multiple skills from just diving in and seeing everything work in a real world application. We all learned a lot about Github and how to utilize pull requests to work together as well as putting together a kanban board track the project pipeline and staying on track for what needs to be done. Our team learned a lot also about working together and everyone's strengths and weaknesses and helping each other out in skills that we may be better or worse than someone else at.

What's next for Book Toons

Creating more functionality, fleshing out more of the basic workflows (adding drop-downs, search suggestions, directly creating playlists for users to add to their Spotify accounts