Radio Seeker
A web application that lets users search, add, edit, remove, and listen to online radio stations. With a simple, user-friendly interface and practical features, users can easily manage their favorite radio stations.
The Project
Overview
Radio Seeker is a Next.js (v14.2.3) application built with JavaScript that emphasizes usability and accessibility. The UI is implemented with Radix UI and shadcn/ui and styled with Tailwind CSS. Forms and validation are handled with react-hook-form, @hookform/resolvers, and Zod, while notifications use Sonner. The app supports station search, inline playback, local persistence of favorites (localStorage), and quick editing. Architecturally, Next.js was chosen for hybrid routing and SSG/SSR where appropriate, keeping a lean bundle and a fast developer experience.
Visual Showcase
Project Preview
What Makes It Special
Key Features
- Search stations by name or metadata
- Add, edit and remove stations from a persisted list
- Inline audio player with play/pause and basic controls
- Persist favorites locally with optional backend sync
- Accessible, component-driven UI built with Radix + shadcn/ui
Technical Choices
Key Decisions
- Choose Next.js for hybrid routing and SSG/SSR where appropriate
- Use Radix UI + shadcn/ui to build accessible, composable components
- Use react-hook-form + Zod for resilient form handling and validation
- Persist favorites in localStorage for offline-first UX and optional sync
- Centralize audio playback in a shared component to avoid concurrent streams
Results & Metrics
Impact
- Demonstrates reliable inline audio playback and media controls
- Showcases accessible, component-driven UI patterns (Radix + shadcn)
- Provides a practical example of client-side persistence and CRUD flows
- Good technical talking point for form validation and UX trade-offs