RAD-YO

Rad-Yo 🎙️ What it does Rad-Yo is a retro-inspired web radio that lets users tune into curated audio content from different decades. With interactive buttons, real-time FM frequency switching, and an AI-powered DJ delivering byte-sized era-relevant messages, Rad-Yo blends nostalgia with modern tech.

How we built it It is built with React and Vite. We used raw CSS and tailwind for styling and SVG integration to create an interactive radio UI. Firebase powers features like notes and saved stations. The AI DJ uses simple message logic for now, but is designed to evolve.

Challenges we ran into Integrating SVG elements with React event handlers was tricky. Making the layout responsive without breaking the retro aesthetic took effort. Managing real-time interactions while keeping performance smooth. Coordinating team tasks with version control and design handoffs. Accomplishments that we're proud of Fully functional interactive radio built from scratch Retro pixel-perfect UI inspired by real FM radios and boomboxes Toggleable AI DJ messages that adapt by decade Dynamic note-keeping and favorites using Firebase Designed everything in Adobe Illustrator— no templates used What we learned Deep React + SVG event integration How to use Firebase for realtime features Team-based Git workflows and deployment via Vercel Retro design principles and pixel UI crafting Time and scope management in a short hackathon What's next for Rad-Yo Add real era-specific music or podcasts Voice-based DJ commentary using real TTS Offline mode with local caching More interactive elements (cassette tape player, spinning knobs) User-submitted radio messages and memories

Built With

• adobe-illustrator
• javascript
• react
• svg
• tailwind