Desafio Técnico para Processo Seletivo XLOW 2025

Desafio 1

O desafio propõe a construção de uma VITRINE de produtos RESPONSIVA, a partir do consumo de uma API utilizando somente as tecnologias HTML, CSS e JavaScript. Simples assim!

API

As informações dos produtos estão sendo retornadas da API do desafio:
API de Resultado: desafio.xlow.com.br/search
Nela você terá um array de produtos, e os detalhes de cada um em
API de Produto: desafio.xlow.com.br/search/:productid
lá você terá informações especificas de cada produto

Estrutura da página

O conteúdo mínimo que se espera é que a página desenvolvida neste desafio tenha:

• 1 - Ter um contador com o número de produtos retornados
• 2 - Ter um botão que altere a quantidade de produtos por linha ao ser clicado, exemplo:
  • No mobile de 1 produto para 2 por linha (vice-versa) e no desktop de 4 para 5 (vice-versa)
• Sobre vitrine de produtos

Estrutura da Vitrine

Se espera que cada produto tenha:

• Imagem
• Nome
• Imagens das variações do produto
  • AÇÃO: ao clicar na imagem, trocar para imagem principal
• preço
  • Com preço com desconto destacado visualmente caso haja desconto
• Sobre botão de comprar
  • Não precisa ter ações ao clicar, a página não precisa ir para outro local

Imagem de referência

Tecnologias permitidas neste desafio

• HTML5
• CSS3
• ECMAScript 6
• Jquery (opcional)

Desafio 2

O desafio propõe a criação de um Slider de imagens em React que possui rolagem infinita, rolagem automatica e também contenha setas para navegar entre as imagens a esquerda e a direita da imagem atual. Além disso, o Slider também deve conter bolinhas clicáveis para navegar entre as imagens.

Imagens

As imagens a aparecem no Slider devem conter

• Texto alternativo(alt)
• Hyperlink

Slider

As imagens deve ser adicionadas no Slider através de um array de objetos contendo as informações:

• URL
• ALT
• LINK

Imagem de referência

Tecnologias permitidas neste desafio

• HTML5
• CSS: CSS MODULES
• REACT

Observação: Não é permitido utilizar nenhuma biblioteca adicional além do react

Entrega

Crie um repositório para o desafio e envie o link para contato do recrutamento.

No caso do desafio necessitar do uso de Yarn ou NPM para ser executado o repositório deve conter um arquivo "package.json" com as dependências e o comando "npm start" configurado corretamente