wnur website
overview
new website for wnur 89.3 fm, northwestern's student-run radio station. it's live at wnur.org, go hit listen. the old site didn't really match what wnur is, but this one does: station branding, a listen bar that follows you around, live on-air info, and ascii visualizer that reacts to the broadcast in real time. bass hits move the field, mids warp it, treble adds detail. built with others from the 2026-2027 exec board. i led website development and design.
features
- ascii hero that reads the live stream: open the site, press play, watch the canvas move with whatever's on air
- global listen bar with play/pause and now-playing context on every page
- radio page with today's schedule and the current show highlighted
- sticky header cat logo that animates when you're listening
- about, contact, and section layouts for news, wavelength, and sports
technical details
- next.js 16 app router, react 19, typescript, tailwind css v4
/api/stream: same-origin proxy for the live rcs revma stream so the browser can run web audio analysis without cors issuesAudioReactiveCanvas: canvas flow-field visualizer driven by analyser metrics from the stream (production react/typescript version; separate from the vanilla demo on this portfolio site)/api/on-air: schedule data from a google sheet csv export, parsed in chicago time; revalidates every 60 seconds/api/contact: contact form email through resend with validation and a honeypot field- sticky header with animated cat logo states for idle vs. playing
- page transitions and reduced-motion fallbacks sitewide
schedule workflow
djs maintain a shared google sheet (day | start | show | dj). the site reads a public csv export url from env, derives now playing and up next, and polls the on-air api from the client. no separate cms or database for the schedule.
related work
the ascii visualizer has its own write-up here: ascii audio interpreter.