Radio Seeker
Uma aplicação web que permite aos usuários buscar, adicionar, editar, remover e ouvir estações de rádio online. Com uma interface simples e amigável e recursos práticos, os usuários podem gerenciar facilmente suas estações de rádio favoritas.
O Projeto
Visão Geral
Radio Seeker é uma aplicação Next.js (v14.2.3) construída com JavaScript que enfatiza usabilidade e acessibilidade. A UI é implementada com Radix UI e shadcn/ui e estilizada com Tailwind CSS. Formulários e validação são tratados com react-hook-form, @hookform/resolvers e Zod, enquanto notificações usam Sonner. O app suporta busca de estações, reprodução inline, persistência local de favoritos (localStorage) e edição rápida. Arquiteturalmente, Next.js foi escolhido para roteamento híbrido e SSG/SSR onde apropriado, mantendo um bundle enxuto e experiência de desenvolvedor rápida.
Demonstração Visual
Prévia do Projeto
O Que o Torna Especial
Principais Funcionalidades
- Buscar estações por nome ou metadados
- Adicionar, editar e remover estações de uma lista persistida
- Player de áudio inline com play/pause e controles básicos
- Persistir favoritos localmente com sync opcional de backend
- UI acessível e orientada a componentes construída com Radix + shadcn/ui
Escolhas Técnicas
Decisões-Chave
- Escolher Next.js para roteamento híbrido e SSG/SSR onde apropriado
- Usar Radix UI + shadcn/ui para construir componentes acessíveis e composáveis
- Usar react-hook-form + Zod para tratamento e validação de formulários resilientes
- Persistir favoritos em localStorage para UX offline-first e sync opcional
- Centralizar reprodução de áudio em componente compartilhado para evitar streams concorrentes
Resultados e Métricas
Impacto
- Demonstra reprodução de áudio inline confiável e controles de mídia
- Mostra padrões de UI acessível e orientada a componentes (Radix + shadcn)
- Fornece exemplo prático de persistência client-side e fluxos CRUD
- Bom ponto de discussão técnica para validação de formulários e trade-offs de UX