Retro Radio (Your Team)

• GIF

  Retro Radio Demo

• 

  Frontend

• 

  testing of ws and stuff

Inspiration

When we were little, seeing walkie-talkies in movies and on TV fascinated us all. We all wanted to get one as a kid, to try it and experience it. But back then, not all of us were given walkie-talkies. So now, we created our own.

What it does

It’s a web-based push-to-talk app that simulates a classic walkie-talkie. Users can:

• Tune into different “frequencies”
• Press and hold to transmit live audio and the feel of using a real walkie talkie
• Experience a vibe that feels like you’re using old school technology
• We also have few very interesting radio channels broadcasting your favourite GTA radio and a spooky ghosty storyteller and riddler, but you must find those frequencies first!

How we built it

• Frontend: Next.js + Tailwind CSS with interactive React hooks for the UI, frequency slider, and waveform animation.
• Audio: MediaRecorder + Web Audio API for real-time capture, playback, and signal beeps/static.
• Backend: Django + Django Channels using WebSockets for live streaming across frequency-based groups.

Challenges we ran into

• Getting real-time audio streaming to work smoothly without noticeable delay or glitching.
• Handling browser permission quirks (like autoplay restrictions for audio).
• Making the interface feel intuitive while staying true to that analog-radio vibe.

Accomplishments that we're proud of

• Real-time WebSocket audio streaming — fully functional.
• Clean, aesthetic UI that actually feels retro.
• Built something unique and interactive that people will enjoy playing with.

What we learned

• Deep dive into the Web Audio API and MediaRecorder quirks.
• Real-time data handling using Django Channels and async WebSockets.
• Crafting a full-stack project with seamless frontend-backend integration.

What's next for "Your Team"

We’re planning to:

• Add Robot36 image transmission support (just like slow-scan TV in ham radio).
• Introduce more special channels.
• Let users join with custom call signs and improve channel-based user coordination.
• Add few separate live broadcast channels
• Maybe add a spooky Easter egg or two 👻

Built With

• channels
• daphne
• ffmpeg
• howler.js
• icecast2
• next.js
• python
• react
• redis
• tailwindcss