Synth-Co

Inspiration

For this hackathon themed around education, I got inspiration from platforms like LeetCode, which help users improve their coding skills through problem-solving. However, I decided to blend this concept with my hobby like music.

What it does

Synth-Co is a website designed to facilitate learning about synthesizers. Users can enhance their understanding step-by-step by solving problems that involve manipulating various settings and observing how they affect the sound output. Similar to coding challenges, users can submit their solutions and compare them with expected outputs.

How I built it

I built Synth-Co using Next.js for full-stack development, incorporating features like authentication using NextAuth, data storage with Prisma and Supabase, and UI design with Tailwind CSS and Shadcn UI. The core functionality of generating sounds and manipulating settings is achieved through the Web Audio API.

Challenges I ran into

One major challenge was enabling real-time updates to the oscillator settings while the sound was playing. Additionally, creating custom hooks to simulate a MIDI keyboard and implementing osc recording functionalities posed significant hurdles.

Accomplishments that I'm proud of

I take pride in successfully implementing real-time updates for the oscillator and developing a functional keyboard interface for playing sounds. Furthermore, I am particularly proud of the meticulous attention to detail in designing an intuitive user interface that seamlessly guides learners through the intricacies of synthesizer manipulation

What I learned

The process of working on Synth-Co provided invaluable insights into the intricacies of the Web Audio API and honed our ability to tackle complex project structures, such as implementing OOP principles or crafting custom hooks, to make project's structure better

What's next for Synth-Co

In the future, I plan to update Synth-Co by adding more features to the oscillator, creating an admin page for easier problem management, and implementing real-time visualization of sound using HTML canvas.

Built With

• next
• nextauth
• prisma
• shadcn
• tailwind