Bubble Group > Case Studies > Harmony Visualizer: A No-Code Solution for Visualizing Musical Harmonies

Harmony Visualizer: A No-Code Solution for Visualizing Musical Harmonies

Technology Category

Application Infrastructure & Middleware - Event-Driven Application
Platform as a Service (PaaS) - Application Development Platforms

Applicable Industries

Buildings
Cement

Use Cases

Building Automation & Control
Visual Quality Detection

About The Customer

The Harmony Visualizer app is designed for anyone interested in music and how different notes can be harmonized in different keys. It provides a visual platform that simplifies the complex process of understanding musical harmonies. The app is particularly useful for music students, teachers, composers, and musicians who want to explore and understand the harmonization of different notes. The user-friendly interface makes it accessible to users with varying levels of musical knowledge, from beginners to professionals. The app's future enhancements will further expand its usability and functionality, making it an even more valuable tool in the music industry.

The Challenge

The founders of Harmony Visualizer, Lillian Zhu, Anna Shih, Gargi Panatula, and Olivia Wang, were first-year Computer Science students at the University of Washington when they decided to build an app that provides users with a visual keyboard platform. The goal was to create a tool that could show how different musical notes can be harmonized in different keys. However, despite their computer science background, they lacked experience in frontend development and were concerned about the complexities of programming features like syntax and repositories. They needed a solution that would allow them to implement their ideas effectively without the stress of traditional programming.

The Solution

The team chose to build their app on Bubble, a no-code platform. Bubble's point-and-click web editor and cloud hosting platform allowed them to build a fully customizable web application without the need for complex coding. Users of the Harmony Visualizer first select the key in which they would like to analyze harmonies. They can then hover over each of the keys on the keyboard, causing the relevant harmonies to light up below. Clicking each key also produces the relevant pitch. The app also includes a toggle hold feature where a user can click on a key to select it, and click on the harmonized keys to hear the audio from both notes at the same time. The team plans to expand the functionality of the app to include all major and minor keys and to incorporate the toggle feature onto all notes.

Operational Impact

The Harmony Visualizer app has successfully provided a visual platform for understanding musical harmonies. The use of Bubble's no-code platform has allowed the team to focus on the functionality and user experience of the app, rather than getting bogged down in complex coding challenges. The app's success at Dubhacks 2020 demonstrates its potential and value in the music industry. The team's future plans for the app, including expanding the range of keys and notes supported and adding informational elements, will further enhance its usability and appeal to a wider audience.

Quantitative Benefit

The app was developed and hosted within a day using the Bubble platform.
The team won the low-code track at Dubhacks 2020 with their application.
The app currently supports harmonization for C Major and C Minor keys, with plans to expand to all major and minor keys.