Um desafio de https://github.com/RodyRafa/challenge/tree/master/react
- Possibilidade de inserir o nome da música ou do álbum e obter uma lista;
- Caso um album seja procurado e retornado, quando selecionado o album, usuário será direcionado a lista de música desse album.
- Reproduzir a preview da música.
- É necessário utilizar React;
- Você deve criar um repositório e compartilhar com a gente;
- Não deve usar nenhum Framework CSS (Bootstrap, PureCss, etc.);
- Não deve usar scaffolds (Create React App, etc.), queremos ver como vai construir a estrutura do seu projeto;
- Quero poder rodar o seu projeto com yarn/npm start;
- A aplicação deve solicitar o token que será utilizado para realizar as requisições para a API;
- Persistência do TOKEN, quando expirado solicitar um novo token;
- Precisamos ter certeza que nossa aplicação funciona conforme o esperado, alguns testes seriam bem vindos, estamos usando por aqui enzyme e jest, mas sinta-se a vontade para testar com o que sente maior conforto.
- Pense que sua aplicação passará por 3 ambientes, DSV - HML - PRD, monte build e use variaveis de ambiente.
- Quando o usuário fizer uma requisição seria legal salvar dentro do redux, caso ele digite e busque novamente o album nós pegamos uma cópia de lá para não fazer múltiplas requisições para a API.
- Quando o usuário entrar na aplicação podemos exibir uma lista com os últimos albums buscados/clicados para melhorar a experiência.
- Hoje grande parte dos acessos a sites são feitos por celular, um layout responsivo faz todo sentido para nossa aplicação!
- Nosso time de UX é bem exigente, pensam bastante na experiência do usuário, algumas animações e efeitos seriam interessantes também.
- Tudo usando uma infraestrutura grátis.
- OAuth para fazer login e obter o token de acesso.
- Scroll infinito e botão de carregar mais para um melhor UX.
- Backend para que o token de acesso não fique exposto e para SSR.
- Hospedado online no vercel.
- Mostrar letras de músicas.
- Tratamento de erros e fallbacks.
- Testes E2E sem mockar nada.
- CI e CD pipeline, testes automatizados em todo commit e deploy direto para a vercel.
- Observabilidade de erros em produção com Axiom.
- Analitcs com @vercel/analytics.
- Componentes de interface do usuário reutilizáveis aos quais você pode adicionar classes.
- Lazy loading componens para carregar mais rápido.
- Localização completa em inglês e português!
- Modo escuro e modo claro.
- SEO amigável.
- SSR para velocidade e melhor SEO.
- Ratelimitando a api através do upstash.
- Cache de consulta no localhost.
- Reproduzir a música completa no caso de ter uma conta premium usando o spotify-web-player sdk.
- Executar no edge runtime para obter o máximo de desempenho e o menor custo, sem cold starts.
- Totalmente typesafe usando Typescript e protegendo o backend em runtime usando zod.
- Imagens optimizadas com sharp através da vercel.
- Middleware para garantir que o usuário tem sessão iniciada.
- Painel com documentação para visualização da api do backend.
- Acessível para todos, Leitor de ecrã e navegação por teclado.
Abra o terminal
Baixe o repositório com git clone https://github.com/YgorPerez/spotify-api-challenge.git
cd spotify-api-challenge
Rode pnpm i
Abra o arquivo .env.example e siga as intruçöes
Agora você pode rodar o projeto com pnpm dev e vai estar no localhost:3000
O spotify deixa apenas emails registrados no dashboard conectar no app com a versäo de desenvolvedor entäo qualquer um que quiser ver o app vai ter que me pedir para adicionar seu email do spotify lá. Eu já requisitei acesso a extensäo de quota deles para permitir qualquer usuário, mas é possível que eu näo consiga já que eles tem muitos e muitos requistos que acabariam degradando a UI do aplicativo e eu decidi näo implementar para seguir layout.
Eu näo consigo rodar todo o backend no edge runtime devido à uma limitação da vercel em modo gratuíto que permite apenas 1MB para o tamanho da funçäo edge e eu utilizo 80KB a mais que isso.
Página inicial do app
Página inicial do app no light mode
Página de álbum do app
Página de álbum do app no light mode
