luisfelipe-dev/codify

Uma forma incrível de você ter acesso a curiosidades da sua conta do Spotify! 🎧

Uma forma incrível de você ter acesso a curiosidades da sua conta do Spotify! 🎧

Sobre   |    Requisitos   |    Começando   |    Node.js   |    ReactJS

📃 Sobre

Codify é uma aplicação criada a partir do Spotify’s Web API para coletar informações de sua conta Spotify.

Nela o usuário tem acesso aos seus artistas mais escutados, músicas mais curtidas e suas playlists, dentre diversas outras curiosidades incríveis.

Nesse projeto tivemos como principal objetivo aprender a consumir uma API externa e estudar toda a documentação por trás dela. Além disso, no processo tivemos que estudar sobre a biblioteca de Audio do JavaScript para podermos tocar músicas.

Node.js: realiza todas as chamadas a API do Spotify e customizamos as respostas pra serem da forma que queremos. Serve todos os dados para o front-end.

ReactJS: é uma página Web no qual o usuário terá acesso a informações da sua conta do Spotify.

📚 Requisitos

• Ter Git para clonar o projeto.
• Ter Node.js instalado.
• Ter Yarn instalado.
• Ter credencias do Spotify.

🔒 Credenciais do Spotify para rodar o projeto localmente

Para você poder rodar o projeto localmente na sua máquina é preciso ter uma conta de desenvolvedor no Spotify (para criar essa conta é totalmente gratuito e pode usar sua própria conta do Spotify).

Com a conta criada basta clicar no botão CREATE AN APP e preencher os dados que forem pedidos.

Após isso você terá acesso ao Dashboard da sua aplicação. No lado esquerdo estará suas credenciais, Client ID e Client Secret que serão usuadas para prencher o arquivo .env do backend.

Por fim, no lado direito clique no botão EDIT SETTINGS. No modal que abrir haverá um compo chamado Redirects URIs, nele você irá preencher com a URL em que o seu backend estará rodando com a rota /callback (Ex: http://localhost:3333/callback). Após isso basta clicar em SAVE.

🚀 Começando

  # Clonar o projeto:
  $ git clone https://github.com/TwoDevsForDevs/codify

  # Entrar no diretório:
  $ cd codify

⚙️ Iniciando back-end

  # Entrar no diretório do back-end:
  $ cd backend

  # Instalar as dependências:
  $ yarn

  # Rodar a aplicação:
  $ yarn dev:server

💻 Iniciando front-end

  # Entrar no diretório do front-end:
  $ cd frontend

  # Instalar as dependências:
  $ yarn

  # Rodar a aplicação:
  $ yarn start

Feito com ❤️ por Matheus Pires e Paulo Henrique 👋🏻