Nos últimos dias, venho desenvolvendo uma funcionalidade para integrar meu portfólio pessoal com a API do Spotify. A ideia é exibir músicas que estou ouvindo, meus top tracks e dispositivos conectados — tudo isso diretamente na interface do meu site, com autenticação segura e atualizações em tempo real.
🎯 Objetivo do Projeto
A proposta principal é integrar a experiência do usuário com minha rotina musical, tornando o site mais pessoal, interativo e tecnicamente robusto. Além disso, utilizei a integração com o Dev.to para exibir meus artigos no blog embutido do próprio portfólio — e este post é o primeiro teste da integração! 😄
⸻
🔧 Tecnologias Utilizadas
• Next.js (App Router) — framework React full-stack
• TypeScript — segurança de tipos e manutenibilidade
• Spotify Web API — para acessar dados musicais e de dispositivos
• Cookies HTTP-only — para armazenar tokens com segurança
• JWT (JSON Web Token) — para autenticação e renovação de sessão
• Axios — requisições à API do Spotify
• Dev.to API — para importar e renderizar artigos automaticamente
⸻
🔐 Segurança em Primeiro Lugar
Tokens de acesso e refresh são armazenados como cookies HTTP-only, garantindo que o navegador não tenha acesso direto a essas informações sensíveis via JavaScript. Além disso, estou usando JWT para controlar a sessão com expiração automática e renovação via endpoint /api/refresh.
⸻
🧠 Aprendizados Técnicos
• Como lidar com o erro Environment variable not found em ambientes de produção como Vercel
• Estratégias para evitar any em APIs externas
• Validação de cookies para controlar exibição condicional do botão de login
• Boas práticas com dotenv, tipagem segura e fallback para dados ausentes
⸻
💡 Próximos Passos
• Melhorar cache e performance com SWR ou React Query
• Criar um painel de controle musical no admin do portfólio
• Incluir integração com o YouTube Music como alternativa futura
• Expandir o blog com mais conteúdos sobre arquitetura limpa, NestJS e automações com Docker + AWS
⸻
🤝 Conclusão
Este projeto tem sido uma ótima oportunidade de aplicar conceitos modernos de frontend, backend e segurança em aplicações web. Com a API do Dev.to integrada, agora posso escrever artigos diretamente aqui — o que facilita muito manter a comunidade atualizada sobre o que venho aprendendo e criando.
Se quiser ver isso funcionando ao vivo, visite meu site (link do seu domínio).
⸻
📌 Obrigado por acompanhar! Em breve, mais tutoriais práticos e insights sobre desenvolvimento web.
Top comments (0)