---
# System prepended metadata

title: Desafio Front-end

---

# Desafio Front-end

## Sobre o teste

Olá! Neste desafio iremos a API do spotify para criarmos a nossa versão da UI do 

 - Funcionalidade de pesquisa para buscar músicas por nome ou álbum;
 - Listagem do retorno da pesquisa com a interação do álbum e o usuário deverá ser redirecionado para a tela caso o mesmo clique no álbum;
 - Disponibilizar a funcionalidade de preview da música caso o usuário clique em uma.

### Requisitos básicos

- Utilizar React;
- Utilizar modelo de autenticação [Implicit Grant Flow](https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow) para acesso à API do Spotify;
- Persistir o access_token e caso o mesmo expire, requisitar um token novo;
- Aplicar testes unitários nos componentes, estamos usando por aqui *React Testing Library e Jest*, mas sinta-se a vontade para testar com o que se sentir mais confortável.

### Visual & Funcionalidades

Quando o usuário entrar na aplicação e autorizar o uso do Spotify, ele deverá buscar por álbum ou música. Após a pesquisa na API, deverá apresentar os álbuns correspondentes; Ao clicar no álbum o sistema deverá apresentar todas as músicas que o álbum possui.

É necessário, que ao escolher uma música, seja apresentado um feedback com os dados da música que está tocando.

### Tela principal

![](https://github.com/rodyrafa/challenge/raw/master/imgs/home_1.jpg)

![](https://github.com/rodyrafa/challenge/raw/master/imgs/home_2.jpg)

### Tela de album

![](https://github.com/rodyrafa/challenge/raw/master/imgs/list.jpg)

### Guide

![](https://github.com/rodyrafa/challenge/raw/master/imgs/guide.jpg)

## Api

Você deve utilizar as API’s do Spotify. Sua aplicação deve possuir um client_id em variável de ambiente que será utilizado para fazer a autenticação com a API do Spotify

[Url da API](https://developer.spotify.com/documentation/web-api/quick-start/)

## Requisitos adicionais

- Um dos frameworks mais difundidos em nossa empresa é o [Next.js](https://nextjs.org/) e seria muito interessante se você pudesse utilizá-lo no seu projeto.
- Armazenamento das requisições na memória da aplicação, para no caso de uma busca repetida ser possível recuperar a cópia da memória ao invés de fazer múltiplas requisições à API.
- Como a maioria dos sites é visitado tanto por celular quanto por computador de mesa, é relevante que o layout da aplicação seja responsivo.
- Salvar histórico de busca e ao clicar no campo de pesquisa, exibir o histórico. (Guardar informações das buscas da maneira que achar mais adequado)

# Método de avaliação

- Acessibilidade e responsividade do layout;
- Legibilidade do código e aplicação de boas práticas;
- Estrutura da aplicação e componentização;
- Tratamento e armazenamento dos dados em memória;
- Cobertura e qualidade de testes unitários;

Boa sorte e qualquer dúvida não hesite em nos contatar por issue aqui no Github.