🎸 Guitar Guitar Revolution
🎯 Inspiration
Ever since we were young, my cousins and I have bonded really well. That’s why our band, PickeledApples, was naturally a fun was to combine our musical talent and personal connection. As we’ve all gotten older, coordinating in-person band practices has become more difficult. We needed a way to share guitar ideas virtually. However, most other online tab makers are clunky and slow, so we decided to build our own tool, a streamlined WebApp that lets us write and record guitar ideas on the fly. Guitar Guitar revolution is a fast, flexible, and fun solution to every guitarist’s problems.
💡 What It Does
Guitar Guitar Revolution is a multi-purpose tool for musicians that brings real-world guitar interaction into a digital space. Here’s what it offers:
- 🎶 Entertainment & Exploration – Experiment with new chord combinations and riffs.
- 🎸 Music Creation & Performance – Record audio or use it live in a band setting.
- 📝 Tab Writing – As you strum or tap, tabs are created automatically at the same time as the audio playback.
- 🎵 Real-Life Guitar Tuning – Each string plays a real recorded guitar sound in ukulele tuning, making it easy to tune actual instruments by ear.
🛠️ How We Built It
- HTML: Built the main user interface, including buttons and a canvas featuring a ukulele image.
- CSS: Styled the app for a clean, user-friendly experience.
- TypeScript: Powered all interactivity and logic behind the scenes, allowing users to interact with the instrument and generate real-time feedback.
For the audio, we recorded high-quality samples of guitar strings tuned to a ukulele using an electric guitar and a digital audio interface. The result was clean, consistent sound samples that enhance the user experience and keep the ukulele authentic.
🚧 Challenges We Faced
A major challenge we faced was aligning all the mechanics of the user inputting their key presses and mouse swipes. Although tracking the output of a single input is simple, tracking over three million chord combinations was more difficult. In the end, numerous if statements were used to track each key press to the correct audio files.
Another challenge was figuring out how to keep our project open source by uploading the audio files somewhere. The audio files are a large and important factor of our project, so keeping it available to anyone who wants to use them is important. In the end, the files were uploaded to a public Google Drive folder.
🏆 Accomplishments We’re Proud Of
One technical breakthrough was getting the strumming interaction just right. In real life, a guitar string doesn’t make sound until it's released, so we mirrored that behaviour. So, in Guitar Guitar Revolution, the string must be dragged by the mouse to play the sound and update the tab. However, for quick use, the string can also be tapped, which is useful when building intricate tabs. This dual interaction model keeps the experience both realistic and efficient.
Another big accomplishment was creating our video pitch. As a band, we already work well together musically, but building this project confirmed how well we collaborate creatively and technically. The pitch video showcases our strengths in intelligence, musicality, humor, and business thinking.
📚 What We Learned
Simplicity is key.
We originally aimed for a much bigger, more complex idea. After stepping back and asking what we truly wanted to build, everything clicked much better. By focusing on just the essential parts, the project became more enjoyable, manageable, and meaningful, and we laid a strong foundation for future features.
🔮 What’s Next for Guitar Guitar Revolution
Our band includes not just a guitarist, but also a drummer, bassist, pianist, and singer, so there’s plenty of room for growth.
We designed the app architecture to be easily expandable. That means we can add more instruments and features in the future without rewriting everything. We'd love to evolve it into a one-stop=shop for full-band collaboration platform for writing, practicing, and recording music.
🔗 Open Source Resources
- GitHub code: https://github.com/chloewychan/GGR
- Google Drive audio files: https://drive.google.com/drive/folders/1cJSK0jtXuQZE_C63SuF6PsKBtmzBNdq5?usp=drive_link

Log in or sign up for Devpost to join the conversation.