Uma página simples com um campo de busca que consulta uma API, essa consulta deve trazer os resultados em uma lista, caso não tenha resultado deve ser exibido uma mensagem que não obteve resultado.
A API é pública e deve ser consultada pela sua página usando fetch ou a biblioteca de requisão que se sentir mais confortável. Ela é uma API de GraphQL para buscar artistas do Spotify e está no seguinte endpoint:
https://spotify-graphql-server.herokuapp.com/graphql
Caso GraphQL seja algo completamente novo para você, segue alguns artigos que podem ajudar:
O que é GraphQL - https://imasters.com.br/back-end/graphql-poder-ao-front-end
Exemplo de chamada em React (inglês) - https://www.freecodecamp.org/news/5-ways-to-fetch-data-react-graphql/#5-react-query-fetch-api
Corpo da requisição de exemplo contendo a query de GraphQL:
{
"query": "query {
queryArtists(byName: \"Michael Jackson\") {
name
image
}
}"
}Todo o layout deve seguir o protótipo abaixo (para conseguir inspecionar as informações é necessário criar uma conta no Figma):
https://www.figma.com/file/XISzikTRrDO2Q766Cs552O/Home?node-id=0%3A1
Caso tenha dificuldade de iniciar o projeto segue algumas ferramentas que poderão ajudar, a utilização delas é opicional:
- React (recomendado): https://reactjs.org/docs/create-a-new-react-app.html
- Vue: https://cli.vuejs.org/guide/creating-a-project.html
- Angular: https://angular.io/tutorial/toh-pt0
- Svelte: https://dev.to/jacobherrington/setting-up-a-svelte-project-in-seconds-with-degit-4dpa
Esse teste pode ser executado de uma hora até seis horas de acordo com a experiência do desenvolvedor, o tempo de desenvolvimento não terá tanto peso na avaliação, mas é importante que fique claro a experiência que foi desenvolver esse teste, quais dificuldades, facilidades ou opiniões.
- O projeto precisa ser 100% funcional (caso tenha dificuldade reporte qual seria junto a entrega, ou no decorrer do processo).
- Aplicar os estilos usados no protótipo.
- Ser feito com typescript ou javascript em alguma biblioteca de componentização que você tenha mais facilidade, como: React, Svelte, Vue.js ou Angular.
- Integração com a API GraphQL fornecida, pode ser feito a maneira que achar melhor e mais prática.
- README com documentação mínima para executar o projeto.
- Conhecimento mínino da utilização das ferramentas.
- Aplicação dos estilos do protótipo.
- Quaisquer demonstrações extras de qualidades no processo de desenvolvimento (estrutura, decisões, clareza e objetividade).
Preferencialmente um link para o projeto no github, caso não deseje compartilhar, poderá enviar zipado por e-mail para o recrutador, levando em conta que deve ser um projeto git mesmo zipado.