/spotify-app-trinks

Teste front-end para a Tricks

Primary LanguageJavaScript

Tecnologias usadas:

  • NextJS
  • ReactJS
  • Styled Components
  • Axios
  • NodeJS

Como rodar o projeto

  • Clone o projeto;
  • Rode yarn ou npm install para instalar as dependencias
  • Pegar as as chaves client id e Client Secret
  • Criar um arquivo na .env.local na raiz do projeto com as seguintes variaveis de ambiente: NEXT_PUBLIC_API_KEY para a client id, NEXT_PUBLIC_API_KEY_SECRET para a client secret e NEXT_PUBLIC_REDIRECT_URI com a url de produção (https://spotify-app-trinks.vercel.app/)
  • Rode npm run dev ou yarn dev para subir o servidor local.

Sobre o projeto

Utilizei o nextjs como framework do react pela facilidade de criar endpoints em nodeJS no back-end. Sendo assim, usei a função de back-end para fazer os processos de autorização e fetch na API pois como preciso passar dados sensíveis como chaves, resolvi não usar o front-end para isso. Para o CSS usei styled components pois com ele evitamos problemas de conflitos de classes, além de aproveitar as funções de encaminhamentos de props.

Deploy produção

https://spotify-app-trinks.vercel.app/

Screenshots:

Página Login
Página Login

Home Dashboard
Dashboard

Dashboard com lista de músicas
Dashboard

Dashboard com música tocando
Dashboard

Dashboard com modal com a letra da música
Dashboard