Loading
What it was really like entering my first major hackathon as the frontend developer for Team Hustlers — racing against the clock, building VoiceScout, and turning speech AI into reactive UI.
Every developer remembers the first time they entered a hackathon.
It is completely different from building personal projects alone in your bedroom. There is no endless timeline, no room to overthink architecture for two weeks, and no hiding behind unfinished branches. You have a ticking clock, an ambitious idea, and a team relying on you to deliver something that actually works when judges test it.
For me, that trial was the global AssemblyAI Voice Agent Hackathon hosted with lablab.ai, competing as the front-end developer for our team, Team Hustlers.
The theme of the hackathon was building interactive applications powered by real-time speech AI.
During our first brainstorming session, Team Hustlers zeroed in on a common frustration students face when watching long technical lectures or tutorials. If you get confused by a specific concept midway through a lecture, finding the answer usually means scrubbing back and forth through an endless video timeline, guessing timestamps, or reading auto-generated captions in a language you might not fully speak.
We decided to build VoiceScout: an interactive voice tutor that allows learners to hold down a Push-to-Talk button, ask questions in their native language, and get an instant spoken explanation while the video player automatically jumps to the exact second that covers the topic.
As the sole front-end engineer on Team Hustlers, the entire user interface, audio feedback loops, and demo flow were on my shoulders.
Working with voice AI on the front end is tricky. Unlike text inputs where you just show a spinner, audio interactions need instant visual feedback so users know their microphone is picking up sound.
I built a state machine handling distinct stages: listening, thinking, speaking, and error recovery. Using the browser Web Audio API and MediaRecorder, I created concentric soundwave rings that expand and pulse according to real-time microphone decibels. When users press the button, they immediately see that the system is capturing their voice.
Connecting the speech pipeline to the YouTube Player API required precise timing. The player had to pause the moment the user started speaking, play back the AI audio response, and smoothly seek to the relevant video timestamp. To make sure our demo would not break if hackathon Wi-Fi acted up during judging, I also built a fallback prompt drawer with pre-tested question pills.
Competing in that hackathon with Team Hustlers gave me practical experience that months of solo tutorials never could.
Frontend is the true face of any AI product. You can have an incredible machine learning model running on the backend, but if the front end is sluggish, confusing, or fails to show what the system is doing, the user experience falls apart. Front-end developers carry the responsibility of making complex AI feel intuitive and fast.
Under tight deadlines, you also learn why clean, modular components matter. Sloppy shortcuts always come back to bite you late at night when you are trying to wire up APIs before the submission deadline.
Most of all, shipping a working product under pressure alongside talented teammates proved to me that I can collaborate rapidly, communicate clearly, and deliver production-grade interfaces under real-world constraints.
Our official hackathon submission, team contributions, and demo are publicly verifiable:
Check out the live application, interactive demo, or reference mentioned in this article.
