Yampi: Teste prático para Frontend Javascript Developer

Boas vindas pessoa desenvolvedora.

Este é o teste que nós, aqui da Yampi, usamos para avaliar tecnicamente todas as pessoas que estão participando do processo seletivo para a vaga de Frontend.

Como aplicar

Faça um fork desse projeto para iniciar o desenvolvimento. PRs não serão aceitos.

Desafio

A Yampi nasceu para revolucionar os produtos digitais para e-commerce. Nosso desafio diário é redefinir e aprimorar os processos de compra e venda online.

O seu desafio será criar uma vitrine básica de uma loja virtual, contendo:

Cabeçalho

Dentro do cabeçalho deverá conter um menu de navegação com as categorias da loja, um input para a busca dos produtos e um ícone que mostra o conteúdo do carrinho da loja.

Página inicial

Nessa página você deverá listar todos os produtos da loja. Você pode também colocar alguns banners para deixar sua loja ainda mais bonita.

Página da categoria

Nessa página você deverá mostrar o nome da categoria selecionada sendo o título principal da página e listar os produtos apenas dessa categoria. Você também deverá criar um select para definir como será a ordenação desses produtos, sendo as ordenações por nome, preço e avaliação do produto.

Página do produto

Nessa página você deverá mostrar os detalhes do produto, sendo o nome do produto como o título principal da página, a imagem, a descrição, o preço, um input para selecionar a quantidade e um botão para adicionar o produto ao carrinho.

Carrinho (página ou dropdown)

O carrinho da sua loja deverá conter as seguintes ações:

• Atualizar a quantidade de um produto no carrinho;
• Excluir um item do carrinho;
• Mensagem de carrinho vazio;
• Valor total, somando os preços de todos os itens no carrinho;
• Botão para a finalização do pedido;

Instruções

• Utilize a FakeStoreAPI para consultar os produtos e as categorias;
• Utilize a ferramenta Vue CLI para iniciar seu projeto;
• Conte uma história. Utilize a metodologia de commits semânticos;

Stack

Este projeto deverá usar a seguinte stack de desenvolvimento:

• HTML;
• CSS;
• Sass;
• JavaScript;
• Vue + Vue Router + Vuex;

O que avaliaremos de seu teste

• Histórico de commits do git;
• Organização, semântica, estrutura, legibilidade, manutenibilidade do seu código;
• Alcance dos objetivos propostos;
• Adaptação mobile (layout responsivo);
• Componentização e extensibilidade dos componentes Javascript;