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 22.14.0 (ou compatível) instalado para conseguir rodar o desafio.

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

Instale as dependências e start o projeto

yarn
yarn start

Após os passos acima, você conseguirá abrir a aplicação em http://127.0.0.1:4200/.

O client_id default não é válido, então você receberá uma mensagem de erro. Para esse desafio (como na imagem abaixo). Queremos que você utilize a API do Spotify para autenticação, veja o passo a passo a seguir.

Setup Spotify API

Trocar a configuração do projeto é bem simples, segue abaixo o passo a passo pra você conseguir um client id do Spotify.

• Logue no Portal do desenvolvedor do Spotify
• Crie uma aplicação em API do Spotify.
• Na tela da aplicação criada, preencha os seguintes campos abaixo.
• Por fim, clique em save.

Website: http://127.0.0.1:4200/
Redirect URIs: http://127.0.0.1:4200/login/callback

OBS. 1: Não é necessário marcar nenhuma opção em Which API/SDKs are you planning to use?. mas se quiser pode marcar a opção Web API.

OBS. 2: Para Redirec URIs direcionadas para sua máquina, apenas o endereço com ip https://127.0.0.1:PORT é aceito pelo spotify, se quiser, saiba mais aqui.

• Abra o arquivo .env na raiz do projeto para substituir o valor YOUR_SPOTIFY_API_CLIENT do REACT_APP_CLIENT_ID para o client id gerado pelo spotify.

• Agora você pode parar o projeto caso esteja rodando, e rodá-lo novamente, yarn start e quando entrar em http://127.0.0.1:4200 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!