Front-end Challenge

Objetivo

Nesse desafio iremos avaliar o seu conhecimento nas tecnologias de front-end utilizadas no Plurall (React, JavaScript, CSS, HTML/JSX).

Você deverá implementar o desafio descrito em CHALLENGE.md usando esse codebase como base.

Esse projeto é um boilerplate baseado nos projetos do Plurall (produto no qual você ira trabalhar).

Critério de avaliação

Abaixo estão algumas caracteristicas que achamos importantes:

Organização e legibilidade do código.
Simplicidade.
Boas praticas.
Conhecimento de Javascript.
Conhecimento de React.
Outros.

Configurando o ambiente

Você precisa ter node LTS ou superior instalado para conseguir rodar o desafio.

Faça fork do projeto em sua conta pessoal e siga os passos a seguir.

Adicione o url do Plurall no seu `/etc/hosts`.

No Mac/Linux, faça:

echo '127.0.0.1\tboilerplate.local.plurall.net' | sudo tee -a /etc/hosts

No windows, siga esse tutorial, e adicione a linha 127.0.0.1 boilerplate.local.plurall.net no arquivo de hosts.

Instale as dependências e start o projeto

yarn 
yarn start

Após os passos acima, você conseguirá abrir a aplicação em http://boilerplate.local.plurall.net:3000/. Porém, como nossas aplicações são autenticadas com o OAuth, você será redirecionado para o SomosID (nosso serviço de autenticação).

Isso quer dizer que o projeto esta funcionando. Porém, para esse desafio, queremos que você use a API do Spotify para autenticação.

Como eles também usam OAuth, trocar a configuração do projeto é bem simples.

Setup Spotify API

Criar uma aplicação na API do Spotify.
Entrar na aplicação criada, clicar no botão edit settings e preencher os seguintes campos abaixo.
Clicar em save.

Website: http://boilerplate.local.plurall.net:3000
Redirect URIs: http://boilerplate.local.plurall.net:3000/login/callback

Abrir o arquivo .env no root do projeto, substituir para esse abaixo, ps: mudando o REACT_APP_CLIENT_ID para o client id gerado pelo spotify.

NODE_PATH=src/
REACT_APP_ACCESS_TOKEN_URL=https://accounts.spotify.com/api/token
REACT_APP_AUTHORIZATION_URL=https://accounts.spotify.com/authorize
REACT_APP_CLIENT_ID=YOUR_SPOTIFY_API_CLIENT
REACT_APP_API_URL=https://api.spotify.com/v1
REACT_APP_CALLBACK_URL=http://boilerplate.local.plurall.net:3000/login/callback

Agora você pode stopar o projeto caso esteja rodando, e roda-lo novamente, yarn start e quando entrar em http://boilerplate.local.plurall.net:3000 você vai ser redirecionado para logar no Spotify, você deve estar vendo uma página como essa:

Logue com suas credenciais, e você será redirecionado para a aplicação 👊 😄 e já deve estar vendo uma página como essa abaixo.

Agora voce já pode fazer o desafio.

Boa Sorte!

thiagocamposde/frontend-challenge