Para realizar o projeto, atente-se a cada passo descrito a seguir. Se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀
Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir deste repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
Ao iniciar este projeto, você concorda com as diretrizes do Código de Conduta e do Manual da Pessoa Estudante da Trybe.
🤷🏽♀️ Como entregar
Para entregar o seu projeto você deverá criar um Pull Request neste repositório.
Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub e nosso Blog - Git & GitHub sempre que precisar!
👨💻 O que deverá ser desenvolvido
Neste projeto você criará uma versão simplificada, sem persistência no banco de dados, de uma loja online, desenvolvendo em grupo suas funcionalidades de acordo com demandas definidas em um quadro Kanban, em um cenário próximo ao do mercado de trabalho.
A partir dessas demandas, teremos uma aplicação em que pessoas usuárias poderão:
- Buscar produtos por termos e categorias a partir da API do Mercado Livre;
- Interagir com os produtos buscados de modo a adicioná-los e removê-los de um carrinho de compras em diferentes quantidades;
- Visualizar detalhes e avaliações prévias de um produto, bem como criar novas avaliações e;
- Simular a finalização da compra dos itens selecionados.
📝 Habilidades
Neste projeto você será irá:
- Entender o que são Métodos Ágeis;
- Entender o que é Kanban;
- Entender o que é Scrum;
- Trabalhar em equipes utilizando Kanban ou Scrum de maneira eficaz;
- Praticar todas as habilidades desenvolvidas até agora no módulo de Front-end.
🗓 Data de Entrega
- Este projeto é em grupo;
- São
X
dias de projeto; - Data para entrega final do projeto:
17/08/2022 14:00
.
‼️ Antes de começar a desenvolver
- Clone o repositório
- Use o comando:
git clone [email protected]:tryber/sd-023-a-project-frontend-online-store.git
. - Entre na pasta do repositório que você acabou de clonar:
cd sd-023-a-project-frontend-online-store
- Vá para a branch do seu grupo:
git checkout main-group-XX && git pull
, em queXX
é o número do seu grupo. Exemplos:main-group-1
,main-group-22
.
- Instale as dependências
npm install
.
- Faça alterações separadas por novas branchs criadas a partir da branch
main-group-XX
, criando uma nova branch para cada demanda
- Verifique que você está na branch
main-group-XX
- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
main-group-XX
- Exemplo:
git checkout main-group-XX && git pull
- Exemplo:
- Crie uma branch para a demanda que você vai desenvolver do seu projeto
- Você deve criar uma branch com uma breve descrição da demanda a ser desenvolvida
- Exemplo:
git checkout -b main-group-XX-cria-campo-de-busca
- Adicione as mudanças ao stage do Git e faça um
commit
- Verifique que as mudanças ainda não estão no stage
- Exemplo:
git status
(devem aparecer listadas as novas alterações em vermelho)
- Exemplo:
- Adicione o novo arquivo ao stage do Git
- Exemplo:
git add .
(adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)git status
(devem aparecer listadas as novas alterações em verde)
- Exemplo:
- Faça o
commit
- Exemplo:
git commit -m 'cria componente de busca'
(fazendo o primeiro commit)git status
(deve aparecer uma mensagem tipo nothing to commit )
- Exemplo:
- Adicione a sua branch com o novo
commit
ao repositório remoto
- Usando o exemplo anterior:
git push -u origin main-group-XX-cria-campo-de-busca
- Crie um novo
Pull Request
(PR)
- Vá até a página de Pull Requests do repositório no GitHub
- Clique no botão verde "New pull request"
- Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
- Coloque um título para a sua Pull Request
- Exemplo: "[GRUPO XX] Cria tela de busca"
- Clique no botão verde "Create pull request"
- Adicione uma descrição para o Pull Request e clique no botão verde "Create pull request"
- Não se preocupe em preencher mais nada por enquanto!
- Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado
- Assim que aprovado por pelo menos uma pessoa do seu grupo e o Linter estiver adereçado (veja como nas próximas sessões), acesse SEU Pull Request e clique no botão "Merge pull request"
⌨️ Durante o desenvolvimento
-
Faça
commits
das alterações que você fizer no código regularmente -
Lembre-se de sempre após um (ou alguns)
commits
atualizar o repositório remoto -
Os comandos que você utilizará com mais frequência são:
git status
(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)git add
(para adicionar arquivos ao stage do Git)git commit
(para criar um commit com os arquivos que estão no stage do Git)git push -u origin nome-da-branch
(para enviar o commit para o repositório remoto na primeira vez que fizer opush
de uma nova branch)git push
(para enviar o commit para o repositório remoto após o passo anterior)
🤝 Depois de terminar o desenvolvimento (opcional)
Para sinalizar que o seu projeto está pronto para o "Code Review", faça o seguinte:
-
Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas:
-
No menu à direita, clique no link "Labels" e escolha a label code-review;
-
No menu à direita, clique no link "Assignees" e escolha o seu usuário;
-
No menu à direita, clique no link "Reviewers" e digite
students
, selecione o timetryber/students-sd-023-a
.
-
Caso tenha alguma dúvida, aqui tem um video explicativo.
🕵🏿 Revisando um pull request
Use o conteúdo sobre Code Review para te ajudar a revisar os Pull Requests.
🎛 Linter
O ESLint será utilizado para fazer a análise estática do seu código garantindo a sua qualidade de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento.
Para rodar o linter localmente no seu projeto, execute o comando abaixo:
npm run lint
Você pode instalar o plugin do ESLint
no VSCode
. Para isso, bastar ir em extensions e baixar o plugin ESLint
e instalá-lo.
Você pode consultar nosso contúdo sobre sobre ESLint
caso ainda tenha alguma dúvida.
👥 Trello como ferramenta Kanban
Uma forma para seu grupo organizar as atividades e dividir as tarefas é através de um modelo de Kanban. A Trybe disponibilizou no Trello um board pré-configurado para que você possa duplicá-lo para usar com seu grupo.
Siga os passos abaixo para duplicar o board:
- Acesse o board;
- Abra o menu no canto superior direito;
- Selecione "copiar quadros";
- Defina o time do seu grupo e um título para o board;
- Clique em
criar
; - Personalize seu novo Kanban.
🛠 Testes
A React Testing Library (RTL) será utilizada para execução dos testes.
Na descrição dos requisitos será pedido a adição de atributos data-testid
nos elementos HTML.
Para deixar evidente esta configuração veja o exemplo:
- se o requisito pedido for "crie um botão e adicione o id de teste (ou
data-testid
) com o valormy-action
", você pode escrever:
<button data-testid="my-action" ></button>
ou
<a data-testid="my-action"><a/>
O atributo data-testid="my-action"
servirá para que a React Testing Library (RTL) identifique o elemento. Desta forma será possível realizar testes unitários focados no comportamento da aplicação.
Você pode executar todos os testes unitários localmente para verificar a solução proposta com o comando abaixo:
npm test
Você pode executar os testes para um único requisito passando, como parâmetro para o comando, o nome do arquivo de teste alvo:
npm test src/__tests__/requirement1.test.js
** 👀 De olho na dica:** Desativando testes
Caso queira avaliar apenas um tópico do requisito, você pode usar o .only
após o it
. Com isso, será possível que apenas esse tópico rode localmente e seja avaliado.
🏪 Desenvolvimento
Sua página web irá consumir os dados da API do Mercado Livre para realizar a busca de itens da sua loja online. Para realizar essas buscas, você precisará consultar os seguintes endpoints:
- Para listar as categorias disponíveis:
- Para buscar por itens por termo:
- Parâmetro de busca $QUERY (este parâmetro deve ser substituído pelo valor do campo de busca)
- Endpoint: https://api.mercadolibre.com/sites/MLB/search?q=$QUERY
- Para buscar itens por categoria:
- Parâmetro de busca $CATEGORY_ID (este parâmetro deve ser substituído pelo ID da categoria selecionada)
- Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID
- Para buscar itens de uma categoria por termo (vale ressaltar, que este endpoint não necessariamente precisa receber ambos os parâmetros para funcionar):
- Parâmetro de busca $QUERY (este parâmetro deve ser substituído pelo valor do campo de busca)
- Parâmetro de busca $CATEGORY_ID (este parâmetro deve ser substituído pelo ID da categoria selecionada)
- Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID&q=$QUERY
- Para buscar detalhes de um item especifico:
- Parâmetro de busca $PRODUCT_ID (este parâmetro deve ser substituído pelo valor do campo de busca)
- Endpoint: https://api.mercadolibre.com/items/$PRODUCT_ID
Se você quiser aprender mais sobre a API do Mercado Livre, veja a documentação.
"https://api.mercadolibre.com/sites/MLB/categories"
O retorno desse endpoint será algo no formato:
[
{
"id": "MLB5672",
"name": "Acessórios para Veículos"
},
...
]
"https://api.mercadolibre.com/sites/MLB/search?category=MLB1055&q=Motorola"
O retorno desse endpoint será algo como o exemplo deste arquivo.
👀 De olho na dica: Se der erro de CORS aperte ctrl + shift + r
no seu navegador.
Para maior eficiência de trabalho e para minimizar os conflitos de união de vários códigos é importante que o grupo se organize utilizando a metodologia Kanban.
Você verá que os requisitos do projeto têm, além das observações técnicas e do que será avaliado, descrições tais quais se veriam em um projeto real. Como futura pessoa desenvolvedora é importante você ser capaz de ler e interpretar as descrições dos requisitos para transformá-las em produtos ou, se houver dúvida, saber como resolver tais dúvidas!
Os requisitos estão organizados por prioridade. Demandas de um mesmo grupo de prioridade podem ser realizadas em paralelo e são pré-requisito para as demandas do grupo de prioridade seguinte.
Por exemplo:
- Requisitos 1 e 2: Prioridade 0 (Devem ser feitos PRIMEIRO);
- Requisitos 3 a 5: Prioridade 1 (Devem ser feitos APÓS OS REQUISITO 1 E 2, mas podem ser feitos em paralelo);
- Requisitos 5 a 7: Prioridade 2 (Devem ser feitos APÓS OS REQUISITO 3 A 5, mas podem ser feitos em paralelo);
- Assim por diante.
Se você não seguir a ordem de prioridades terá mais conflitos de merge e demandas concorrentes, em que o avanço de uma depende, necessariamente, do avanço de outra.
A capacidade de priorizar tarefas será constantemente requisitada em sua vida profissional como pessoa desenvolvedora, aproveite o exercício e priorize, neste projeto, as atividades essenciais para depois sequir para as extras (requisitos bônus).
🗣 Nos dê feedbacks sobre o projeto!
Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!
🗂 Compartilhe seu portfólio!
Você sabia que o LinkedIn é a principal rede social profissional e compartilhar o seu aprendizado lá é muito importante para quem deseja construir uma carreira de sucesso? Compartilhe esse projeto no seu LinkedIn, marque o perfil da Trybe (@trybe) e mostre para a sua rede toda a sua evolução.
PRIORIDADE 0
Implemente um módulo que acessa a API do Mercado Livre:
-
Utilize (OBRIGATORIAMENTE) o arquivo
src/services/api.js
para acessar a API do Mercado Livre em sua aplicação; -
Utilize (OBRIGATORIAMENTE) o módulo Fetch para realizar as requisições;
-
Você deve (OBRIGATORIAMENTE) implementar as funções
getCategories()
egetProductsFromCategoryAndQuery()
que estão no arquivosrc/services/api.js
:export async function getCategories() { // Implemente aqui } export async function getProductsFromCategoryAndQuery(/* categoryId, query */) { // Implemente aqui! Quando o fizer, descomente os parâmetros que essa função recebe // Essa função será chamada em vários momentos do projeto para buscar os produtos pela categoria e querys // Dentro da função você pode usar condicionais definir qual API utilizar }
Essas funções devem realizar uma chamada para a API do Mercado Livre e retornar uma Promise com os dados de resultado. Com essa implementação, o uso dessas funções deve ser algo parecido com o exemplo abaixo:
import * as api from './services/api' api.getCategories().then(categories => { console.log(categories) })
A variável
categories
deve conter o objeto JSON com as categorias obtidas através da chamada da API do Mercado Livre:[ { "id": "MLB5672", "name": "Acessórios para Veículos" }, { "id": "MLB271599", "name": "Agro" }, { "id": "MLB1403", "name": "Alimentos e Bebidas" } ]
-
Sinta-se livre para criar novas funções neste arquivo, mas apenas as funções
getCategories()
egetProductsFromCategoryAndQuery()
serão avaliadas.
O que será verificado
- Implementa a função
getCategories
; - Implementa a função
getProductsFromCategoryAndQuery
.
PRIORIDADE 0
A tela principal da plataforma é a de listagem de produtos, onde a pessoa usuária poderá buscar produtos para adicionar ao carrinho, além de filtrar suas buscas.
Crie o campo de busca da tela principal, que será utilizado para listar os produtos encontrados:
- Esta página deve ficar no path
/
, renderizável a partir do acesso ao componente<App />
; - Inicialmente a listagem de produtos deve estar vazia;
- Quando a lista estiver vazia, a página deve mostrar a mensagem
"Digite algum termo de pesquisa ou escolha uma categoria."
; - Adicione o atributo
data-testid
com o valorhome-initial-message
no elemento da mensagem.
Exemplo de página de listagem de produtos antes da busca
A imagem pode ser acessada no arquivo ./wireframes/card_02.png
O que será verificado
- A raiz da aplicação, em
<App />
, renderiza com sucesso; - A tela contém a mensagem pedida: 'Digite algum termo de pesquisa ou escolha uma categoria.'.
PRIORIDADE 1
A pessoa usuária poderá adicionar produtos em seu carrinho de compras, a partir da listagem dos produtos.
Crie uma tela que representará o carrinho de compras da aplicação. Além disso, na tela principal, crie um botão que redireciona à página do carrinho de compras. Inicialmente, o carrinho deve estar vazio.
Crie uma tela que represente o carrinho de compras:
- Quando não existirem produtos no carrinho de compras, a página deve exibir a mensagem
"Seu carrinho está vazio"
; - Adicione o atributo
data-testid
com o valorshopping-cart-empty-message
no elemento da mensagem.
Exemplo da tela Carrinho de Compras
![Tela do carrinho de compras](./wireframes/card_03.png)
Na tela principal, crie um elemento que redirecione a pessoa usuária à página do carrinho de compras:
- O elemento deve estar visível na página inicial (listagem de produtos);
- Este elemento também deverá estar presente na página de detalhes de um produto, mas não se preocupe com isso neste momento, estará descrito em um requisito posterior;
- Adicione o atributo
data-testid
com o valorshopping-cart-button
no elemento que redireciona à pagina de carrinho de compras.
data-testid
. Se você fizer isso com um <Link />
, por exemplo, é este quem deve conter o data-testid
.
Exemplo da tela principal com o elemento que redireciona para a tela do carrinho:
![Tela principal - Com botão do carrinho de compras](./wireframes/bonus_shopping_cart_button.png)
O que será verificado
- A home deve ter o botão do carrinho de compras;
- Clicar no botão deve levar à página do carrinho vazio, com a mensagem 'Seu carrinho está vazio' nela.
PRIORIDADE 1
A tela principal (listagem dos produtos) deve conter uma lista de categorias, que será utilizada para filtrar a busca por categoria. As categorias podem ser obtidas pela API do Mercado Livre. A requisição para essa API deve ser feita uma única vez, após o carregamento da tela.
Na tela principal, liste as categorias obtidas pela API do Mercado Livre:
- 👀 De olho na dica: Posteriormente as categorias serão utilizadas para realizar novas requisições para listar produtos. Ou seja, elas serão clicáveis para aplicar um filtro de categoria. Sugerimos a utilização do elemento do tipo
button
ou do tiporadio button
para listar as categorias. Por hora, neste requisito, será avaliado apenas a listagem das categorias, conforme protótipo. - Adicione o atributo
data-testid
com o valorcategory
nos elementos que receberão o nome da categoria. Atenção! Caso você opte por utilizarradio buttons
para realizar a listagem, aslabels
dos elementos que deverão receber odata-testid
, e não se esqueça da propriedadehtmlFor
.
O que será verificado
- Exibe as categorias retornadas pela API na página de listagem de produtos.
PRIORIDADE 1
A alma da aplicação é a sua lógica de busca e listagem de produtos. Após digitar seus termos no input
da tela principal e clicar no botão de busca, uma requisição deverá ser feita à API do Mercado Livre, tendo como parâmetros a frase digitada. Os produtos retornados pela API devem ser listados na tela.
Na tela principal, crie a listagem dos produtos recebidos pela API do Mercado Livre ao clicar no botão de busca:
- A tela principal deve possuir um elemento
input
com o atributodata-testid="query-input"
; - A tela principal deve possuir um elemento com o atributo
data-testid="query-button"
que, ao ser clicado, dispara a chamada para a API com o termo de busca pesquisado (ou seja, com o valor digitado noinput
); - Renderize na tela uma exibição resumida de todos os produtos retornados pela API, contendo o nome, a imagem e o preço de cada produto;
- Adicione o atributo
data-testid="product"
nos elementos que possuem os dados dos produtos; - Caso a busca não retorne resultados, renderize na tela o texto
"Nenhum produto foi encontrado"
.
O que será verificado
- Exibe todos os produtos retornados pela API, dado um determinado filtro.
PRIORIDADE 2
Quando a pessoa usuária clicar em uma das categorias listadas na tela principal, a aplicação deverá listar todos os produtos encontrados daquela categoria.
Na tela principal, ao clicar em uma das categorias listadas, crie a listagem dos produtos dessa categoria:
- Ao clicar em uma das categorias listadas, faça uma requisição à API do Mercado Livre e renderize na tela uma exibição resumida de todos os produtos retornados dessa categoria, contendo o nome, a imagem e o preço de cada produto;
- Adicione o atributo
data-testid="product"
nos elementos que possuem os dados dos produtos; - 👀 De olho na dica: Lembre-se de consultar os endpoints da API para encontrar a requisição de busca por categoria (mais informações na documentação da API, na seção Desenvolvimento).
O que será verificado
- Exibe corretamente na página somente os produtos da categoria clicada.
PRIORIDADE 3
Agora que a listagem dos produtos está criada, você deverá criar a página de detalhes de um produto.
Ao clicar "no card" de um produto, a pessoa usuária deve ser direcionada para uma página contendo o nome, uma imagem, o preço e a especificação técnica desse produto. Além disso, essa página deve ter um botão que, ao clicar, a pessoa usuária deve ser redirecionada para a página do carrinho de compras.
Ao clicar em "um card" de um produto (o elemento com data-testid="product"
), a pessoa usuária deve ser redirecionada para uma página contendo os detalhes do produto:
- Adicione o atributo
data-testid="product-detail-link"
no elemento que, ao ser clicado, enviará a pessoa usuária para a página de detalhes do produto. Você deve adicionar esse atributo para todos os produtos; - A página de detalhes deve possuir o nome, a imagem, o preço e qualquer outra informação adicional do produto que você desejar;
- Adicione o atributo
data-testid="product-detail-name"
no elemento que, na tela de detalhes, possui o nome do produto; - Adicione o atributo
data-testid="product-detail-image"
no elemento que, na tela de detalhes, possui a imagem do produto; - Adicione o atributo
data-testid="product-detail-price"
no elemento que, na tela de detalhes, possui o preço do produto; - Adicione o atributo
data-testid="shopping-cart-button"
ao botão que, ao ser clicado, redireciona para a página do carrinho de compras.
O que será verificado
- Clicar no card de um produto leva à página com seus detalhes;
- Exibe corretamente o nome, a imagem e o preço do produto em sua página de detalhes;
- Exibe o botão que redireciona à página do carrinho de compras;
- Clicar no botão do carrinho leva à página do carrinho de compras com a mensagem 'Seu carrinho está vazio' na tela.
PRIORIDADE 3
A pessoa usuária pode adicionar um produto ao carrinho de compras a partir da página principal contendo a listagem dos produtos.
Todos os produtos que foram adicionados ao carrinho devem aparecer na tela do Carrinho de Compras.
- Lembrete: Quando renderizamos os itens da categoria, os dados dos produtos já estão dentro da sua aplicação. Pense em como armazenar eles sem a necessidade de fazer outra requisição.
Na tela principal, crie um elemento em cada produto que, ao ser clicado, adiciona o produto ao carrinho de compras:
- Adicione o atributo
data-testid="product-add-to-cart"
no elemento que executa a ação de adicionar o produto ao carrinho de compras.
Na tela do Carrinho de Compras, renderize todos os produtos que foram adicionados ao carrinho:
- Os produtos na tela do Carrinho de Compras devem possuir o nome, o preço e a quantidade;
- Adicione o atributo
data-testid="shopping-cart-product-name"
no elemento que possui o nome do produto na tela do carrinho de compras. Você deve adicionar esse atributo para todos os produtos na tela do carrinho; - Adicione o atributo
data-testid="shopping-cart-product-quantity"
no elemento que possui a quantidade do produto na tela do carrinho de compras. Você deve adicionar esse atributo para todos os produtos na tela do carrinho.
O que será verificado
- Adiciona um produto ao carrinho a partir da tela principal;
- Ao adicionar um produto a partir da tela inicial e clicar no carrinho de compras, espera-se que nenhuma requisição(fetch) seja feita.
PRIORIDADE 3
A partir da tela de detalhes de um produto, deve ser possível adicioná-lo ao carrinho de compras.
Na tela de detalhes de um produto, crie um elemento que adicione o produto ao carrinho:
- Adicione o atributo
data-testid="product-detail-add-to-cart"
no elemento que possui a ação de adicionar o produto ao carrinho de compras. - Ainda na tela de detalhes de um produto, adicione um elemento que, ao ser clicado, redireciona a pessoa usuária para a tela de carrinho. Esse elemento precisa ter o atributo
data-testid="shopping-cart-button"
.
Na tela do carrinho de compras, renderize todos os produtos adicionados ao carrinho:
- Os produtos na tela do Carrinho de Compras devem possuir o nome, o preço e a quantidade;
- Adicione o atributo
data-testid="shopping-cart-product-name"
no elemento que possui o nome do produto na tela do carrinho de compras. Você deve adicionar esse atributo para todos os produtos na tela do carrinho; - Adicione o atributo
data-testid="shopping-cart-product-quantity"
no elemento que possui a quantidade do produto na tela do carrinho de compras. Você deve adicionar esse atributo para todos os produtos na tela do carrinho.
O que será verificado
- Adiciona um produto ao carrinho a partir da sua tela de detalhes;
- Avalia se o nome e a quantidade do produto adicionado são exibidos corretamente na tela do carrinho de compras.
10. Visualize a lista de produtos adicionados ao carrinho em sua página e permita a manipulação da sua quantidade
PRIORIDADE 3
Na tela do Carrinho de Compras, deve ser possível aumentar e/ou diminuir a quantidade do produto. Também deve ser possível excluir um produto do carrinho.
Na página do carrinho de compras, crie dois elementos para cada produto que, ao serem clicados, diminuem ou aumentam a quantidade desse produto presente no carrinho:
- Adicione elementos na página do carrinho de compras para aumentar ou diminuir a quantidade de cada produto presente no carrinho;
- A quantidade mínima de um produto no carrinho deve ser
1
; - Adicione o atributo
data-testid="product-increase-quantity"
no elemento que aumenta a quantidade de um produto. Adicione esse atributo para todos os produtos; - Adicione o atributo
data-testid="product-decrease-quantity"
no elemento que diminui a quantidade de um produto. Adicione esse atributo para todos os produtos; - Você pode criar um elemento para remover um item do carrinho, mas isso não será avaliado nesse momento.
O que será verificado
- Adiciona produtos ao carrinho e manipula suas quantidades.
PRIORIDADE 3
Na tela de detalhes de um produto, deve existir um formulário para adicionar avaliações sobre ele. Este formulário deve conter um campo para o e-mail da pessoa avaliadora, uma nota entre 1 e 5 e um campo para comentários sobre o produto. Além disso, os campos e-mail
e nota
devem ser obrigatórios e o e-mail deve ser válido (exemplo: [email protected]
).
A lista de avaliações já realizadas deve persistir na tela de detalhes do produto caso a pessoa usuária saia e retorne posteriormente.
Na tela de detalhes de um produto, crie um formulário para adicionar avaliações:
- Crie um
input
com o atributodata-testid="product-detail-email"
, onde a pessoa usuária colocará o email; - Crie 5 elementos contendo o atributo
data-testid="${index}-rating"
, com o${index}
indo de 1 a 5, para a pessoa escolher qual nota dar ao produto. Neste formulário, os 5 elementos precisam ser renderizados na tela, independente da nota atribuída pela pessoa avaliadora; - Adicione um campo de texto com o atributo
data-testid="product-detail-evaluation"
para a pessoa usuária escrever algo sobre o produto; - Adicione um botão com o atributo
data-testid="submit-review-btn"
para a pessoa usuária enviar a avaliação.
Renderize as avaliações criadas a partir do formulário:
- Ao clicar no botão com o atributo
data-testid="submit-review-btn"
, as informações inseridas no formulário deverão ser renderizadas na tela de detalhes do produto, abaixo do formulário, e os campos de texto do formulário devem ser limpos; - As avaliações devem persistir na tela de detalhes do produto. Ou seja, se a pessoa usuária sair da tela e acessar novamente, as avaliações ainda devem estar sendo renderizadas na página.
O que será verificado
- Avalia se é possível realizar uma avaliação na tela de detalhes de um produto;
- Avalia se o formulário é validado corretamente;
- Avalia se os campos de texto do formulário são limpos após a submissão da avaliação;
- Avalia se a avaliação continua após recarregar a página de detalhes do produto;
- Avalia se a avaliação feita para um produto específico não aparece na tela de detalhes de outro produto.
12. Finalize a compra vendo um resumo dela, preenchendo os seus dados e escolhendo a forma de pagamento
PRIORIDADE 4
Crie uma tela para a finalização da compra, que deve ser acessada a partir da tela do Carrinho de Compras. A tela deve conter um formulário para adicionar as informações do comprador e um resumo dos produtos que foram adicionados ao carrinho. Após finalizar a compra, caso o formulário esteja validado, o carrinho deve ser esvaziado e a pessoa usuária deve ser redirecionada pala a tela principal (listagem dos produtos).
Na tela do carrinho de compras, crie um elemento para finalizar a compra:
- Este elemento, ao ser clicado, deve redirecionar a pessoa usuária à página de checkout;
- Adicione o atributo
data-testid="checkout-products"
no elemento que leva a pessoa à página de checkout.
Na tela de checkout, mostre um resumo dos produtos adicionados ao carrinho
- Ao acessar a tela de checkout, o nome dos produtos que estão no carrinho deverão estar na tela. Você pode adicionar qualquer outra informação sobre os produtos, mas apenas o nome é obrigatório.
Na tela de checkout, crie um formulário para a pessoa usuária adicionar os seus dados pessoais:
-
O formulário precisa possuir os seguintes campos:
-
Nome Completo: este elemento deve possuir o atributo
data-testid="checkout-fullname"
; -
Email: este elemento deve possuir o atributo
data-testid="checkout-email"
; -
CPF: este elemento deve possuir o atributo
data-testid="checkout-cpf"
; -
Telefone: este elemento deve possuir o atributo
data-testid="checkout-phone"
; -
CEP: este elemento deve possuir o atributo
data-testid="checkout-cep"
; -
Endereço: este elemento deve possuir o atributo
data-testid="checkout-address"
. -
Método de pagamento: este elemento deve ser um
input
do tiporadio
e conter 4 opções:- Boleto, que deve possuir o atributo
data-testid="ticket-payment"
; - Visa, que deve possuir o atributo
data-testid="visa-payment"
; - MasterCard, que deve possuir o atributo
data-testid="master-payment"
; - Elo, que deve possuir o atributo
data-testid="elo-payment"
;
- Boleto, que deve possuir o atributo
-
Um botão para submeter o formulário, contendo o atributo
data-testid="checkout-btn"
-
-
Todos os campos do formulário são obrigatórios e precisam ser preenchidos para finalizar o checkout;
Ao clicar no botão para submeter o formulário:
- Caso algum campo não esteja preenchido, um elemento contendo a mensagem
Campos inválidos
deve ser renderizado. Este elemento deve possuir o atributodata-testid="error-msg"
; - Caso todos os campos estejam preenchidos, a pessoa usuária deve ser redirecionada para a tela principal (listagem de produtos) e o carrinho deve ser esvaziado. 💡 Ou seja, caso a pessoa usuária acesse a página do carrinho de compras após finalizar o checkout, a mensagem
Seu carrinho está vazio
deverá estar na tela.
O que será verificado
- Avalia se é possível, a partir de um carrinho de compras com produtos, acessar a página de checkout com um formulário válido.
13. Mostre junto ao ícone do carrinho a quantidade de produtos dentro dele, em todas as telas em que ele aparece
PRIORIDADE 4
Adicione junto ao elemento que redireciona à página do carrinho de compras, um número contendo a quantidade total de itens armazenados no carrinho. Esse número deve aparecer em todas as páginas em que esse elemento está presente.
Adicione a quantidade de produtos armazenados no carrinho:
- Esse elemento deve ser visível da página de listagem de produtos e da página de detalhes de produto;
- Adicione o atributo
data-testid="shopping-cart-size"
no elemento que contém a quantidade de produtos presente no carrinho; - A quantidade a ser exibida é o número total de itens, ou seja, se a pessoa adiciona o produtoA 5 vezes e o produtoB 2 vezes, o valor a ser exibido é 7.
O que será verificado
- Avalia se a quantidade de produtos no carrinho da tela de listagem de produtos é renderizada corretamente;
- Ao recarregar a página de listagem e adicionar novos produtos, avalia se a quantidade de itens no carrinho de compras é atualizada na tela de detalhes.
PRIORIDADE 4 -
Na tela do carrinho de compras já é possível aumentar ou diminuir a quantidade dos produtos. Agora você deve limitar a quantidade máxima que a pessoa usuária pode adicionar ao carrinho de acordo com a quantidade em estoque disponível de cada produto.
Na tela do carrinho de compras, crie um limite para a quantidade máxima dos produtos:
- Ao clicar no elemento q possui o atributo
data-testid="product-increase-quantity"
para aumentar a quantidade de um produto no carrinho, o valor não pode ser superior a sua quantidade disponível em estoque; - 👀 Dica: Você pode encontrar esse valor na chave
"available_quantity"
, disponível na API do Mercado Livre.
O que será verificado
- Avalia se não é possível adicionar ao carrinho mais produtos do que o disponível em estoque;
- Ao tentar adicionar no carrinho mais produtos do que o disponível no estoque, o valor não deve ser alterado.
PRIORIDADE 4
Alguns produtos possuem o frete grátis. Adicione essa informação nesses produtos, tanto na tela de listagem dos produtos quanto na tela de detalhes de um produto.
Adicione a informação de frete grátis aos produtos que o possuem:
- Adicione um elemento que mostre essa informação para cada produto que possua frete grátis na tela de listagem de produtos;
- Essa informação pode ser adicionada também à tela de detalhes do produto, mas isso não será avaliado;
- Adicione o atributo
data-testid="free-shipping"
no elemento que apresenta essa informação para todos os produtos que possuam frete grátis; - Para os produtos que não possuem frete grátis, você não precisa adicionar nenhum novo elemento.
O que será verificado
- Exibe corretamente a informação de frete grátis dos produtos.
PRIORIDADE 5
Adicione ao site um layout agradável para quem usa ter uma boa experiência.
PRIORIDADE 5
Faça um layout responsivo completo, para telas pequenas.
PRIORIDADE 5
Crie um seletor dropdown que permite a lista de produtos ser ordenada por maior e menor preço.
PRIORIDADE 5
Coloque uma animação no carrinho quando adicionar/remover um produto.
PRIORIDADE 5
Exiba o conteúdo do carrinho num slider na lateral da tela, de forma que ele possa ser exibido e escondido através da interação com botão (veja os detalhes no card).
PRIORIDADE 5
Destaque os produtos que já foram adicionados ao carrinho, diferenciando-os dos demais produtos da lista da página principal (veja os detalhes no card abaixo).