Resolução do desafio front-end do processo seletivo da Keyrus
As tecnologias utilizadas foram:
-
✴️ HTML — Para construção da base da página
-
💠 CSS — Para estilização
-
⚠️ JavaScript — Para integração de API e manipulação de informações -
📙 React.Js como biblioteca de construção
O projeto se baseia em consumir uma API e tem 3 requerimentos principais, sendo eles:
- Home Page
- Product Page
- Header e Footer
HOME - CONSULT ALL PRODUCTS
- Carrossel com opção "Add to Cart"
- Banner com o produto de menor preço
- Carrossel com todos os produtos
- Validação de estoque (se não houver estoque, remover a opção de adicionar ao carrinho)
PRODUCT PAGE - CONSULTATION BY PRODUCT CODE
- Construir uma página do produto com opção de adicionar ao carrinho
- Preço dos produtos
- Descrilção dos produtos
- Nome do produto
- Botão "Add to Cart"
- Validação de estoque (se não houver estoque, remover a opção de adicionar ao carrinho)
- Resumo (summary)
- Uma imagem para representação do produto
- Responsividade para tamanhos diferentes de telas e dispositivos
- Validação de estoque, renderizando botões ativos e inativos de acordo com o estoque disponível
- Carrossel dinâmico, caso a quantidade de produtos aumente ou diminua
- Consulta da página do produto em "View Details" ou por consulta através da url /{id}
- Se não há retorno de produtos na home, ele informa com a mensagem "There are no Products"
- Durante a requisição, informa o usuário do carregamento da página
- Carrinho na página de produtos (A validação de estoque da home consiste no estado ativo e inativo do botão)
# Versões mínimas ou superiores.
node -v
v12.18.0
npm -v
6.14.4# Clonar o repositório
git clone https://github.com/Calebe-Fernandes/keyrus-challenge
#Entrar no diretório
cd keyrus-challenge
#Instalar as dependências
npm install
#Iniciar o local host
npm start- Por ultimo abra seu navegador e digite:
localhost:3000