BoomBot

Login Page
Landing Page
Chat with BoomBot
Recommendations with BoomBot

Inspiration

As music lovers, we found that certain songs trigger fond memories of the past. To capture that nostalgic essence, we developed a Retro AI BoomBox. This unique tool helps users rediscover tunes that transport them back in time, all while merging the charm of the olden years with modern technology.

What it does

Our AI BoomBox is ultimately a music guru! BoomBot is equipped with tools to help users find new music through either a) a conversation with BoomBot with help from Cohere API, or b) accessing the user's Spotify data via Spotify API to curate a nostalgic playlist for the user based on their listening history.

How we built it

We designed the user interface using Figma, heavily considering elements such as font, colour, and images to evoke that nostalgic feeling. We built the front-end using React.js and CSS, while our backend composed of MongoDB and Flask. The Cohere API was essential in creating BoomBot's chat feature, and the Spotify API gave us the necessary data to recommend users nostalgic songs based on their listening history.

Challenges we ran into

Merge conflicts: Throughout our development process, we encountered challenges with merge conflicts, where multiple developers attempted to modify the same code simultaneously. Resolving these conflicts required careful coordination and communication among team members to ensure that all changes were integrated smoothly.

Problems with our original tech stack (Taipy): Initially, we faced issues with our chosen technology stack, Taipy. These challenges ranged from compatibility issues to limitations in functionality, as well as lack of documentation, prompting us to reevaluate our approach and make necessary adjustments to ensure the smooth progress of our project.

How to work and participate in a hackathon (this is our first in-person hackathon!): As first-time participants in an in-person hackathon, we encountered a learning curve in understanding how to effectively collaborate within the intense and time-constrained environment of a hackathon. Overcoming this challenge involved adapting quickly to the fast-paced nature of the event, prioritizing tasks, and leveraging each team member's strengths to maximize productivity and innovation.

The slowness of Azure and Cohere: Throughout the development process, we experienced delays due to the sluggish performance of Azure and Cohere, hindering our ability to efficiently execute certain tasks and slowing down our overall progress. Despite these challenges, we employed strategies such as optimizing our workflows and seeking alternative solutions to mitigate the impact of these performance issues and keep our project on track.

Accomplishments that we're proud of

We finished our project with the goals we had in mind!: One of our proudest accomplishments is successfully completing our project while achieving the specific objectives we set out to accomplish. Despite the challenges and obstacles we faced along the way, our team remained focused and determined, ultimately delivering a product that aligns with our initial vision and goals.

Experimented and used up to 10 different technologies: Throughout the development process, we embraced a spirit of experimentation and innovation by incorporating and leveraging up to 10 different technologies. This breadth of exploration not only expanded our technical expertise but also allowed us to discover new tools and approaches that enhanced the functionality and robustness of our project.

Text to speech feature: One standout achievement of our project is the successful implementation of a text-to-speech feature. This functionality not only adds value to our product but also demonstrates our team's ability to integrate advanced capabilities into our project, enhancing its usability and accessibility for users.

Expanded our skills and built experiences for our resume: Engaging in this project provided us with invaluable opportunities to expand our skill sets and gain practical experience, enriching our resumes and bolstering our professional profiles. From honing technical proficiencies to refining collaboration and problem-solving skills, each team member has grown personally and professionally through their contributions to the project.

Developed the front-end close to its original design: We take pride in our meticulous attention to detail and dedication to delivering a front-end interface that closely resembles its original design. By prioritizing user experience and adhering to design principles, we ensured that our project not only functions seamlessly but also boasts an aesthetically pleasing and intuitive user interface.

What we learned

Using Spotify API with Python: We gained proficiency in leveraging the Spotify API with Python, allowing us to access and manipulate Spotify's vast music database for our project. This experience deepened our understanding of API integration and expanded our capabilities in working with external data sources.

Flask: Through our project development, we familiarized ourselves with Flask, a lightweight and flexible Python web framework. Learning Flask enabled us to build web applications efficiently and effectively, providing us with a valuable toolset for future web development projects.

Setting up GitHub Actions with Azure: We acquired knowledge and skills in configuring GitHub Actions to automate our workflow processes, coupled with deploying our application on the Azure cloud platform. This integration streamlined our development pipeline and enhanced collaboration among team members, reinforcing the importance of automation in modern software development practices.

React: Our experience with React, a popular JavaScript library for building user interfaces, allowed us to create dynamic and interactive front-end components for our project. By mastering React, we gained insights into component-based architecture and learned best practices for building scalable and maintainable web applications.

Figma: We explored Figma, a collaborative interface design tool, to create and prototype the visual elements of our project. Working with Figma enhanced our design skills and facilitated seamless collaboration among team members, enabling us to iterate and refine our design concepts efficiently throughout the development process.

What's next for BoomBot

Inclusion of users without Spotify accounts: We plan to expand the accessibility of BoomBot by accommodating users who do not have a Spotify account. This could involve integrating additional music streaming services or providing alternative methods for accessing and enjoying the features offered by BoomBot.

Responsiveness: Enhancing the responsiveness of BoomBot across various devices and screen sizes is a priority. By optimizing the user experience for desktops, tablets, and mobile devices, we aim to ensure that BoomBot remains functional and visually appealing regardless of the platform used.

Multi-language support: To cater to a diverse user base, we intend to implement multi-language support within BoomBot. This will involve translating the user interface and content into multiple languages, allowing users from different regions and linguistic backgrounds to interact with BoomBot in their preferred language.

Attention to small details like animations and transitions: We recognize the importance of refining the user experience by paying attention to small details such as animations and transitions. Adding subtle yet engaging animations and transitions throughout the interface will elevate the overall look and feel of BoomBot, contributing to a more immersive and enjoyable user experience.