{"id":28223433,"url":"https://github.com/lmuffato/project-frontend-online-store-trybe","last_synced_at":"2026-04-27T08:32:12.366Z","repository":{"id":139798689,"uuid":"412906514","full_name":"lmuffato/Project-frontend-online-store-Trybe","owner":"lmuffato","description":"Projeto frontend online store - Projeto avaliativo em grupo da Trybe do Bloco 13: Metodologias Ágeis","archived":false,"fork":false,"pushed_at":"2021-10-02T20:39:12.000Z","size":4589,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main-group-11","last_synced_at":"2025-06-12T00:43:09.535Z","etag":null,"topics":["api","fetch","front-end","props","props-type","react","reactjs","state","state-management","trybe-projects"],"latest_commit_sha":null,"homepage":"https://github.com/tryber/sd-010-a-project-frontend-online-store/pull/433","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lmuffato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-10-02T20:37:07.000Z","updated_at":"2021-11-22T23:34:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"84166227-e13e-450a-985f-085bb1c0aaf7","html_url":"https://github.com/lmuffato/Project-frontend-online-store-Trybe","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lmuffato/Project-frontend-online-store-Trybe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-frontend-online-store-Trybe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-frontend-online-store-Trybe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-frontend-online-store-Trybe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-frontend-online-store-Trybe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lmuffato","download_url":"https://codeload.github.com/lmuffato/Project-frontend-online-store-Trybe/tar.gz/refs/heads/main-group-11","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-frontend-online-store-Trybe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32329463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","fetch","front-end","props","props-type","react","reactjs","state","state-management","trybe-projects"],"created_at":"2025-05-18T08:09:37.345Z","updated_at":"2026-04-27T08:32:12.345Z","avatar_url":"https://github.com/lmuffato.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Termos de acordos\n\nAo iniciar este projeto, você concorda com as diretrizes do Código de Ética e Conduta e do Manual da Pessoa Estudante da Trybe\n\n# Boas vindas ao repositório do projeto de Front-End Online Store!\n\nVocê já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Fique atento a cada passo, e se tiver qualquer dúvida, nos envie por _Slack_! #vqv 🚀\n\nAqui 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.\n\n# Sumário\n\n- [Habilidades](#habilidades)\n- [Entregáveis](#Entregáveis)\n  - [O que deverá ser desenvolvido](#o-que-deverá-ser-desenvolvido)\n  - [Antes de começar a desenvolver](#antes-de-começar-a-desenvolver)\n  - [Data de entrega](#data-de-entrega)\n- [Intruções para entregar](#intruções-para-entregar)\n  - [Durante o desenvolvimento](#durante-o-desenvolvimento)\n  - [Depois de terminar o desenvolvimento (opcional)](#depois-de-terminar-o-desenvolvimento-opcional)\n  - [Revisando um pull request](#revisando-um-pull-request)\n  - [Linter](#linter)\n  - [Usando o Trello como ferramenta kanban](#usando-o-trello-como-ferramenta-kanban)\n- [Como desenvolver](#como-desenvolver)\n- [Requisitos do projeto](#requisitos-do-projeto)\n  - [Grupos de prioridade](#grupos-de-prioridade)\n  - [Requisitos Bônus](#requisitos-bônus)\n  - [Lista de requisitos](#lista-de-requisitos)\n\n    `Requisitos Obrigatórios`\n    - [1. Implemente o módulo de acesso à api do Mercado Livre](#1-implemente-o-módulo-de-acesso-à-api-do-mercado-livre)\n    - [2. Crie uma página de listagem de produtos vazia](#2-crie-uma-página-de-listagem-de-produtos-vazia)\n    - [3. Crie a página do carrinho de compras](#3-crie-a-página-do-carrinho-de-compras)\n    - [4. Liste as categorias de produtos disponíveis via API na página principal](#4-liste-as-categorias-de-produtos-disponíveis-via-api-na-página-principal)\n    - [5. Liste os produtos buscados por termos, com os dados resumidos, associados a esses termos](#5-liste-os-produtos-buscados-por-termos-com-os-dados-resumidos-associados-a-esses-termos)\n    - [6. Selecione uma categoria e mostre somente os produtos daquela categoria](#6-selecione-uma-categoria-e-mostre-somente-os-produtos-daquela-categoria)\n    - [7. Redirecione para uma tela com a exibição detalhada ao clicar na exibição resumida de um produto](#7-redirecione-para-uma-tela-com-a-exibição-detalhada-ao-clicar-na-exibição-resumida-de-um-produto)\n    - [8. Adicione produtos a partir da tela de listagem de produtos](#8-adicione-produtos-a-partir-da-tela-de-listagem-de-produtos)\n    - [9. Adicione um produto ao carrinho a partir de sua tela de exibição detalhada](#9-adicione-um-produto-ao-carrinho-a-partir-de-sua-tela-de-exibição-detalhada)\n    - [10. Visualize a lista de produtos adicionados ao carrinho em sua página e permita a manipulação da sua quantidade](#10-visualize-a-lista-de-produtos-adicionados-ao-carrinho-em-sua-página-e-permita-a-manipulação-da-sua-quantidade)\n    - [11. Avalie e comente acerca de um produto em sua tela de exibição detalhada](#11-avalie-e-comente-acerca-de-um-produto-em-sua-tela-de-exibição-detalhada)\n    - [12. Finalize a compra vendo um resumo dela, preenchendo os seus dados e escolhendo a forma de pagamento](#12-finalize-a-compra-vendo-um-resumo-dela-preenchendo-os-seus-dados-e-escolhendo-a-forma-de-pagamento)\n\n    `Requisitos Bônus`\n    - [13. Mostre junto ao ícone do carrinho a quantidade de produtos dentro dele, em todas as telas em que ele aparece](#13-mostre-junto-ao-ícone-do-carrinho-a-quantidade-de-produtos-dentro-dele-em-todas-as-telas-em-que-ele-aparece)\n    - [14. Limite a quantidade de produtos adicionados ao carrinho pela quantidade disponível em estoque](#14-limite-a-quantidade-de-produtos-adicionados-ao-carrinho-pela-quantidade-disponível-em-estoque)\n    - [15. Mostre quais produtos tem o frete grátis](#15-mostre-quais-produtos-tem-o-frete-grátis)\n\n    `Requisitos Extras Não Avaliativos`\n    - [16. Faça um layout para o site](#16-faça-um-layout-para-o-site)\n    - [17. Faça um layout responsivo para o site](#17-faça-um-layout-responsivo-para-o-site)\n    - [18. Crie um seletor dropdown para ordenar a lista de produto por maior e menor preço](#18-crie-um-seletor-dropdown-para-ordenar-a-lista-de-produto-por-maior-e-menor-preço)\n    - [19. Coloque uma animação no carrinho para quando um produto for adicionado](#19-coloque-uma-animação-no-carrinho-para-quando-um-produto-for-adicionado)\n    - [20. Crie um slider lateral para exibir o carrinho na tela principal](#20-crie-um-slider-lateral-para-exibir-o-carrinho-na-tela-principal)\n    - [21. Destaque, na tela principal, os produtos já adicionados ao carrinho](#21-destaque-na-tela-principal-os-produtos-já-adicionados-ao-carrinho)\n    - [22. Impeça que a quantidade do produto seja negativa](#22-impeça-que-a-quantidade-do-produto-seja-negativa)\n- [Avisos finais](#avisos-finais)\n\n# Habilidades\n\nNesse projeto, você será capaz de:\n\n* Entender o que são Métodos Ágeis\n* Entender o que é Kanban\n* Entender o que é Scrum\n* Trabalhar em equipes utilizando Kanban ou Scrum de maneira eficaz\n* Praticar todas as habilidades desenvolvidas até agora no módulo de Front-End\n\n---\n\n# Entregáveis\n\n## O que deverá ser desenvolvido\n\nNeste 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 mais próximo ao do mercado de trabalho. A partir dessas demandas, teremos uma aplicação onde os usuários poderão:\n  - Buscar produtos por termos e categorias a partir da _API do Mercado Livre_;\n  - Interagir com os produtos buscados de modo a adicioná-los e removê-los de um carrinho de compras em diferentes quantidades;\n  - Visualizar detalhes e avaliações prévias de um produto, bem como criar novas avaliações;\n  - E por fim, finalizar a compra (simulada) dos itens selecionados.\n\nEste repositório **já conta com uma `main-group` para cada grupo**, identificada como `main-group-1` para o grupo 1, `main-group-2` para o grupo 2, e assim por diante. Para desenvolver, você sempre deve:\n\n* **Criar sua branch de desenvolvimento a partir da sua branch main**. Para isso, clone este repositório, faça o `git checkout main-group-XX \u0026\u0026 git pull` e em seguida o `git checkout -b main-group-XX-minha-feature`.\n* Para criar uma Pull Request para fazer **Code Review**, entitule-a `[GRUPO XX] Meu título` e **sempre aponte a Pull Request da sua branch para a branch `main-group-XX` do seu grupo, como no exemplo abaixo:**\n\n![Exemplo de como apontar uma Pull Request para a branch main do grupo](pull-request-para-branch-do-grupo.png)\n\n* Quando várias pessoas desenvolvem para um mesmo projeto podem ocorrer **conflitos de merge** que precisarão ser resolvidos. Prestem atenção a isso!\n\n⚠ **ATENÇÃO! É POSSÍVEL COMMITAR, POR ENGANO, NA BRANCH DE OUTRO GRUPO, ENTÃO TOME MUITO CUIDADO** ⚠\n\n### Antes de começar a desenvolver\n\n1. Clone o repositório\n  * `git clone git@github.com:tryber/sd-010-a-project-frontend-online-store.git`.\n  * Entre na pasta do repositório que você acabou de clonar:\n    * `cd sd-010-a-project-frontend-online-store`\n  * Vá para a branch do seu grupo, com `git checkout main-group-XX \u0026\u0026 git pull`, onde `XX` é o número do seu grupo. Exemplos: `main-group-1`, `main-group-22`.\n\n2. Instale as dependências e inicialize o projeto\n  * Instale as dependências:\n    * `npm install`\n  * Inicialize o projeto:\n    * `npm start` (uma nova página deve abrir no seu navegador com um texto simples)\n\n3. Faça alterações separadas por novas branchs criadas a partir da branch `main-group-XX`, criando uma nova branch para cada demanda\n  * Verifique que você está na branch `main-group-XX`\n    * Exemplo: `git branch`\n  * Se não estiver, mude para a branch `main-group-XX`\n    * Exemplo: `git checkout main-group-XX \u0026\u0026 git pull`\n  * Agora, crie uma branch para a demanda que você vai desenvolver do seu projeto\n    * Você deve criar uma branch com uma breve descrição da demanda a ser desenvolvida\n    * Exemplo: `git checkout -b main-group-XX-cria-campo-de-busca`\n\n4. Adicione as mudanças ao _stage_ do Git e faça um `commit`\n  * Verifique que as mudanças ainda não estão no _stage_\n    * Exemplo: `git status` (devem aparecer listadas as novas alterações em vermelho)\n  * Adicione o arquivo alterado ao _stage_ do Git\n      * Exemplo:\n        * `git add .` (adicionando todas as mudanças - _que estavam em vermelho_ - ao stage do Git)\n        * `git status` (devem aparecer listadas as novas alterações em verde)\n  * Faça seus `commit`\n      * Exemplo:\n        * `git commit -m 'cria componente de busca`\n        * `git status` (deve aparecer uma mensagem tipo _nothing to commit_ )\n\n5. Adicione a sua branch com o novo `commit` ao repositório remoto\n  * Usando o exemplo anterior: `git push -u origin main-group-XX-cria-campo-de-busca`\n\n6. Crie um novo `Pull Request` _(PR)_\n  * Vá até a página de _Pull Requests_ do [repositório no GitHub](https://github.com/tryber/sd-010-a-project-frontend-online-store/pulls)\n  * Clique no botão verde _\"New pull request\"_\n  * Clique na caixa de seleção _\"Compare\"_ e escolha a branch do grupo, `main-group-XX`, e a sua branch **com atenção**\n  * Coloque um título para a sua _Pull Request_\n    * Exemplo: _\"[GRUPO XX] Cria tela de busca\"_\n  * Clique no botão verde _\"Create pull request\"_\n  * Adicione uma descrição para o _Pull Request_ e clique no botão verde _\"Create pull request\"_\n  * **Não se preocupe em preencher mais nada por enquanto!**\n  * Volte até a [página de _Pull Requests_ do repositório](https://github.com/tryber/sd-010-a-project-frontend-online-store/pulls) e confira que o seu _Pull Request_ está criado\n\n7. Assim que aprovado por pelo menos duas pessoas do seu grupo e o _Linter_ estiver adereçado, acesse **SEU** _Pull Request_ e clique no botão _\"Merge pull request\"_\n\n## Data de entrega\n\nData de entrega para avaliação final do projeto: `DD/MM/YYYY - 14:00h`.\n\n---\n\n# Intruções para entregar\n\n### Durante o desenvolvimento\n\n* Faça `commits` das alterações que você fizer no código regularmente\n\n* Lembre-se de sempre após um (ou alguns) `commits` atualizar o repositório remoto\n\n* Os comandos que você utilizará com mais frequência são:\n  1. `git status` _(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)_\n  2. `git add` _(para adicionar arquivos ao stage do Git)_\n  3. `git commit` _(para criar um commit com os arquivos que estão no stage do Git)_\n  4. `git push -u nome-da-branch` _(para enviar o commit para o repositório remoto na primeira vez que fizer o `push` de uma nova branch)_\n  5. `git push` _(para enviar o commit para o repositório remoto após o passo anterior)_\n\n---\n\n### Depois de terminar o desenvolvimento (opcional)\n\nPara **\"entregar\"** seu projeto, siga os passos a seguir:\n\n* Vá até a página **DO SEU** _Pull Request_, adicione a label de _\"code-review\"_ e marque seus colegas\n  * No menu à direita, clique no _link_ **\"Labels\"** e escolha a _label_ **code-review**\n  * No menu à direita, clique no _link_ **\"Assignees\"** e escolha **o seu usuário**\n  * No menu à direita, clique no _link_ **\"Reviewers\"** e digite `students`, selecione o time `tryber/students-sd-010-a`\n\nSe ainda houver alguma dúvida sobre como entregar seu projeto, [aqui tem um video explicativo](https://vimeo.com/362189205).\n\n⚠ Lembre-se que garantir que todas as _issues_ comentadas pelo CodeClimate estão resolvidas! ⚠\n\n---\n\n### Revisando um pull request\n\n⚠⚠⚠\n\nÀ medida que você e as outras pessoas que estudam na Trybe forem entregando os projetos, vocês receberão um alerta via Slack para também fazer a revisão dos Pull Requests dos seus colegas. Fiquem atentos às mensagens do \"Pull Reminders\" no Slack!\n\nUse o material que você já viu sobre [Code Review](https://course.betrybe.com/real-life-engineer/code-review/) para te ajudar a revisar os projetos que chegaram para você.\n\n---\n\n# Como desenvolver\n\n## Execução de testes unitários\n\nVamos utilizar [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) para execução dos testes unitários. Esse _framework_ de testes utiliza algumas marcações no código para verificar a solução proposta. Uma dessas marcações é o atributo `data-testid` e faremos uso dele aqui.\n\nNa descrição dos requisitos (logo abaixo) será pedido que seja feita a adição de atributos `data-testid` nos elementos _HTML_. Vamos a um exemplo para deixar evidente essa configuração: se o requisito pedir _\"crie um botão e adicione o id de teste (ou `data-testid`) com o valor `my-action`, você pode escrever_:\n\n```html\n\u003cbutton data-testid=\"my-action\" \u003e\u003c/button\u003e\n```\n\nou\n\n```html\n\u003ca data-testid=\"my-action\"\u003e\u003ca/\u003e\n```\n\nOu seja, o atributo `data-testid=\"my-action\"` servirá para o React Testing Library(RTL) identificar o elemento e, dessa forma, conseguiremos realizar testes unitários focados no comportamento da aplicação. Afim de verificar a solução proposta, você pode executar todos os testes unitários localmente com o comando abaixo:\n\n```bash\nnpm test\n```\n\nVocê pode executar os testes para um único requisito passando, como parâmetro para o comando, o nome do arquivo de teste alvo:\n\n```bash\nnpm test src/__tests__/requirement1.test.js\n```\n\n## Documentação da API do Mercado Livre\n\nSua 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ês precisarão consultar os seguintes _endpoints_:\n\n- Para listar as categorias disponíveis:\n  - Tipo da requisição: `GET`\n  - Endpoint: https://api.mercadolibre.com/sites/MLB/categories\n- Para buscar por itens por termo:\n  - Tipo da requisição: `GET`\n  - Parâmetro de busca $QUERY (este parâmetro deve ser substituído pelo valor do campo de busca)\n  - Endpoint: https://api.mercadolibre.com/sites/MLB/search?q=$QUERY\n- Para buscar itens por categoria:\n  - Tipo da requisição: `GET`\n  - Parâmetro de busca $CATEGORY_ID (este parâmetro deve ser substituído pelo ID da categoria selecionada)\n  - Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID\n- Para buscar itens de uma categoria por termo:\n  - Tipo da requisição: `GET`\n  - Parâmetro de busca $QUERY (este parâmetro deve ser substituído pelo valor do campo de busca)\n  - Parâmetro de busca $CATEGORY_ID (este parâmetro deve ser substituído pelo ID da categoria selecionada)\n  - Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID\u0026q=$QUERY\n\nSe você quiser aprender mais sobre a API do _Mercado Livre_, veja a [documentação](https://developers.mercadolivre.com.br/pt_br/itens-e-buscas).\n\n### Exemplo de requisição para listar categorias\n\n```\n\"https://api.mercadolibre.com/sites/MLB/categories\"\n```\n\nO retorno desse endpoint será algo no formato:\n\n```json\n[\n    {\n        \"id\": \"MLB5672\",\n        \"name\": \"Acessórios para Veículos\"\n    },\n    ...\n]\n```\n\n### Exemplo de requisição de busca\n\n```\n\"https://api.mercadolibre.com/sites/MLB/search?category=MLB1055\u0026q=Motorola\"\n```\n\nO retorno desse endpoint será algo como o exemplo que temos [neste arquivo](exemplo-motorola.json).\n\n⚠ **ATENÇÃO! Se der erro de CORS aperte `ctrl + shift + r` no seu navegador** ⚠\n\n### Linter\n\nPara garantir a qualidade do seu código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento nós utilizamos neste projeto os linters `ESLint` e `Stylelint`. Para rodar os linters localmente no seu projeto, execute os comandos abaixo:\n\n```bash\nnpm run lint\nnpm run lint:styles\n```\n\n### Usando o Trello como ferramenta kanban\n\nUma forma para seu grupo organizar as atividades e dividir as tarefas é através de um modelo de kanban. A Trybe disponibiliza um [board pré-configurado para vocês](https://trello.com/b/9mjukxCq/frontend-online-store) duplicarem no [Trello](https://trello.com/).\n\n![img](trello.gif)\n\nPara duplicar, basta seguir os passos:\n\n- Acesse o [link do board](https://trello.com/b/9mjukxCq/frontend-online-store)\n- Abra o menu no canto superior direito\n- Selecione \"copiar quadros\"\n- Defina o time do seu grupo e um título para o board\n- Clique em `criar`\n- Personalize seu novo kanban!\n\n---\n\n# Requisitos do projeto\n\nÉ de suma importância que o grupo se organize utilizando o kanban para maior eficiência e para que se minimizem os conflitos que a união de vários códigos trará.\n\nAlém disso, você verá que os requisitos do projeto tem, além das observações técnicas e do que será validado, descrições tais quais se veriam em um projeto real. É **muito importante** ser capaz de ler descrições como essa e transformá-las em produtos ou, se houver dúvida, **saber tirar tais dúvidas!** Seguimos à disposição no Slack para isso.\n\n⚠ **PULL REQUESTS COM ISSUES DE LINTER NÃO SERÃO AVALIADAS. ATENTE-SE PARA RESOLVÊ-LAS ANTES DE FINALIZAR O DESENVOLVIMENTO!** ⚠\n\n### Grupos de prioridade\n\nOs requisitos são organizados por grupos de prioridade. **Demandas de um grupo de prioridade podem ser realizadas em paralelo, e são pré-requisito para as demandas do grupo de prioridade seguinte.** Por exemplo:\n\n- **Requisitos 1 e 2:** Prioridade 0 (Deve ser feito PRIMEIRO)\n- **Requisitos 3 a 5:** Prioridade 1 (Devem ser feitos APÓS OS REQUISITO 1 E 2, mas podem ser feitos em paralelo)\n- **Requisitos 5 a 7:** Prioridade 2 (Devem ser feitos APÓS OS REQUISITO 3 A 5, mas podem ser feitos em paralelo)\n...\n\nSe você não seguir a ordem de prioridades terá que lidar com mais **conflitos de merge** e **demandas concorrentes**, onde o avanço de uma depende, necessáriamente, do avanço de outra para poder acontecer.\n\n### Requisitos Bônus\n\n\n**Saiba priorizar tarefas e priorize o essencial antes de partir para os extras!** Você se deparará com inúmeras situações no trabalho em que precisará priorizar, então este é um exercício muito importante de se praticar.\n\n\n## Lista de requisitos\n---\n\n#### 1. Implemente o módulo de acesso à api do Mercado Livre\n\n**PRIORIDADE 0** - Implemente um módulo que acessa a API do Mercado Livre\n\n**Observações técnicas**\n\nVocê deve (**OBRIGATORIAMENTE**) utilizar o arquivo `src/services/api.js` para acessar a API do Mercado Livre em sua aplicação.  Utilize (**OBRIGATORIAMENTE**) o módulo **[Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)** para realizar as requisições. Já deixamos 2 funções a serem implementadas para isso:\n\n```javascript\nexport async function getCategories() {\n  // Implemente aqui\n}\n\nexport async function getProductsFromCategoryAndQuery(/* categoryId, query */) {\n  // Implemente aqui! Quando o fizer, descomente os parâmetros que essa função recebe\n}\n```\n\nEssas funções devem realizar uma chamada para a API do Mercado Livre e retornar uma [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) com os dados de resultado. Com essa implementação, o uso dessas funções deve ser algo parecido com o exemplo abaixo:\n\n```javascript\nimport * as api from './services/api'\n\napi.getCategories().then(categories =\u003e { console.log(categories) })\n```\n\nA variável `categories` deve conter o objeto JSON com as categorias obtidas através da chamada da API do Mercado Livre:\n\n```json\n[\n  {\n      \"id\": \"MLB5672\",\n      \"name\": \"Acessórios para Veículos\"\n  },\n  {\n      \"id\": \"MLB271599\",\n      \"name\": \"Agro\"\n  },\n  {\n      \"id\": \"MLB1403\",\n      \"name\": \"Alimentos e Bebidas\"\n  }\n]\n```\n\nO que será verificado:\n```\n  - Implementa a função `getCategories`.\n  - Implementa a função `getProductsFromCategoryAndQuery`.\n```\n\n#### 2. Crie uma página de listagem de produtos vazia\n\n**PRIORIDADE 0** - Criar o campo de busca da tela principal, a listagem de produtos, inicialmente vazia. A listagem vazia deve conter a mensagem \"Digite algum termo de pesquisa ou escolha uma categoria\".\n\n- [Tela principal - Antes da busca](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_02.png)\n\n**Observações técnicas**\n\nA tela básica da plataforma é a tela de **listagem de produtos**, onde quem usa buscará o que quer para adicionar ao carrinho e filtrará suas buscas.\n\n  * Esta página deve ficar no path `/`, renderizável a partir do acesso ao componente `\u003cApp /\u003e`.\n  * Mostre a mensagem `\"Digite algum termo de pesquisa ou escolha uma categoria.\"`.\n  * Adicione o atributo `data-testid` com o valor `home-initial-message` no elemento da mensagem.\n\nO que será verificado:\n```\n  - A raiz da aplicação, em `\u003cApp /\u003e`, renderiza com sucesso\n  - A tela contém a mensagem pedida: 'Digite algum termo de pesquisa ou escolha uma categoria.'\n```\n\n#### 3. Crie a página do carrinho de compras\n\n**PRIORIDADE 1** - Criar o botão de carrinho de compras na tela principal, de listagem de produtos, e criar uma tela para o carrinho de compras, inicialmente vazio.\n\n- [Tela do carrinho de compras](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_03.png)\n- [Tela principal - Com botão do carrinho de compras](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/bonus_shopping_cart_button.png)\n\n**Observações técnicas**\n\nQuem usa o site irá adicionar produtos em seu carrinho de compras e finalizar a compra. A listagem de produtos deve ter um ícone de carrinho que, ao ser clicado, leva à página do carrinho. Inicialmente, o carrinho deverá estar vazio.\n\n  * O elemento com o ícone de carrinho de compras deve ficar visível na página inicial (listagem de produtos) e também na página de detalhes de um produto (descrita posteriormente)\n  * Adicione o atributo `data-testid` com o valor `shopping-cart-button` no elemento com o ícone de carrinho de compras. **Atenção!** O **elemento** que faz o direcionamento para a página do carrinho é quem deve conter o `data-testid`. Se você fizer isso com um `\u003cLink /\u003e`, por exemplo, é este quem deve conter o `data-testid`.\n  * Mostre a mensagem `\"Seu carrinho está vazio\"` na página de carrinho de compras quando não existirem produtos no carrinho de compras.\n  * Adicione o atributo `data-testid` com o valor `shopping-cart-empty-message` no elemento da mensagem.\n\nO que será verificado:\n```\n  - A home deve ter o botão do carrinho de compras\n  - Clicar no botão deve levar à página do carrinho vazio, com a mensagem 'Seu carrinho está vazio' nela\n```\n\n#### 4. Liste as categorias de produtos disponíveis via API na página principal\n\n**PRIORIDADE 1** - Listar filtros de categoria obtidos da API na tela principal, de listagem do produto. A requisição da API para recuperar as categorias deve ser feita uma única vez após o carregamento da tela.\n\n- [Tela principal - Com a lista de categorias](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_04.png)\n\n**Observações técnicas**\n\nUm endpoint da API do Mercado Livre retorna as categorias de produto disponíveis para busca. Em momento posterior tais categorias serão usadas para filtrar a listagem de produtos. Por hora, elas devem ser listadas na tela da listagem, conforme protótipo.\n\n  * Adicione o atributo `data-testid` com o valor `category` nos elementos que possuem os nomes das categorias\n\nO que será verificado:\n```\n  - Exibe as categorias retornadas pela API na página de listagem de produtos\n```\n\n#### 5. Liste os produtos buscados por termos, com os dados resumidos, associados a esses termos\n\n**PRIORIDADE 1** - Criar a listagem de produtos. Fazer a exibição resumida do produto (o \"card\" que aparece na listagem). A exibição deve ter título, foto e preço. Fazer requisição à API do Mercado Livre enviando os termos buscados por quem usa e usar o retorno para fazer a listagem dos produtos. Se a busca não retornar resultados, gerar a tela correspondente com o texto \"Nenhum produto foi encontrado\".\n\n- [Tela principal - Após a busca](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_05.1.png)\n- [Tela principal - Nenhum produto encontrado](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_05.2.png)\n\n**Observações técnicas**\n\nA alma do site é a sua lógica de busca e listagem de produtos. Após digitar seus termos na caixa de busca uma requisição deverá ser feita à API do Mercado Livre utilizando a ação de um botão, tendo como parâmetros a frase digitada, e tais produtos deverão aparecer na tela numa exibição resumida, conforme protótipo anexo.\n\n  * Adicione o atributo `data-testid` com o valor `query-input` no elemento `input` que servirá para a pessoa que usa sua aplicação digitar o termo de busca.\n  * Adicione o atributo `data-testid` com o valor `query-button` no elemento que dispara a chamada para a API com o termo de busca pesquisado.\n  * Adicione o atributo `data-testid` com o valor `product` nos elementos que possuem os dados dos produtos.\n\nO que será verificado:\n```\n  - Exibe todos os produtos retornados pela API, dado um determinado filtro\n```\n\n#### 6. Selecione uma categoria e mostre somente os produtos daquela categoria\n\n**PRIORIDADE 2** - Como pessoa usuária, eu quero clicar em uma categoria e ver a listagem de produtos ser filtrada de  acordo com os produtos daquela categoria.\n\nO que será verificado:\n\n- A página, agora, deve poder usar as categorias recuperadas da API para filtrar os produtos buscados. Os termos e as categorias inseridas por quem usa devem ser usados em conjunto para filtragens mais específicas.\n\nO que será verificado:\n```\n  - Filtra corretamente os produtos de uma página para exibir somente os daquela categoria\n```\n\n#### 7. Redirecione para uma tela com a exibição detalhada ao clicar na exibição resumida de um produto\n\nPRIORIDADE 3 - Como pessoa usuária, eu quero clicar no card do produto e visualizar a exibição detalhada do produto com nome do produto, imagem, preço e especificação técnica. A tela também deve possuir um botão que leve ao carrinho de compras.\n\n- [Tela - Detalhamento do produto](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_07.png)\n\n**Observações técnicas**\n\nA exibição detalhada de um produto será a página para exibir tudo o que se tem acerca de um produto específico.\n\n  * Adicione o atributo `data-testid` com o valor `product-detail-link` no elemento que ao ser clicado, enviará a pessoa que usa a aplicação para a página de detalhes do produto. Você deve adicionar esse atributo para todos os produtos.\n  * Adicione o atributo `data-testid` com o valor `product-detail-name` no elemento que possui o nome do produto na tela de detalhes.\n\nO que será verificado:\n```\n  - Clicar no card produto leva à página com seus detalhes\n```\n\n#### 8. Adicione produtos a partir da tela de listagem de produtos\n\n**PRIORIDADE 3** - Na tela de listagem de produtos, permitir adicionar o produto ao carrinho.\n\n**Observações técnicas**\n\nConfigure uma forma de adicionar produtos ao carrinho de compras a partir da tela de listagem de produtos.\n\n  * Adicione o atributo `data-testid` com o valor `product-add-to-cart` nos elementos que executam a ação de adicionar os produtos ao carrinho de compras.\n  * Desenvolva algo da forma simples: um elemento adiciona um produto.\n  * Adicione o atributo `data-testid` com o valor `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.\n  * Adicione o atributo `data-testid` com o valor `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.\n\nO que será verificado:\n```\n  - Adiciona da tela de listagem um produto que aparece no carrinho\n```\n\n#### 9. Adicione um produto ao carrinho a partir de sua tela de exibição detalhada\n\n**PRIORIDADE 3** - Na tela de exibição detalhada do produto, permitir adicionar o produto ao carrinho.\n\n- [Tela principal - Adicionar ao carrinho na exibição detalhada](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_13.png)\n\n**Observações técnicas**\n\nPoder adicionar produtos ao carrinho a partir de sua tela de exibição detalhada será um canal importante de conversões de venda.\n\n  * Adicione o atributo `data-testid` com o valor `product-detail-add-to-cart` no elemento que possui a ação de adicionar o produto ao carrinho de compras.\n  * Adicione o atributo `data-testid` com o valor `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.\n  * Adicione o atributo `data-testid` com o valor `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.\n\nO que será verificado:\n```\n  - Adiciona um produto ao carrinho da sua tela de detalhes\n```\n\n#### 10. Visualize a lista de produtos adicionados ao carrinho em sua página e permita a manipulação da sua quantidade\n\n**PRIORIDADE 3** - Adicionar lista de produtos ao carrinho, com valor total ao final. Criar botões (-) e (+) para cada produto do carrinho, permitindo alterar a quantidade desejada de cada produto. A quantidade não pode ser negativa. Criar também botão (X) para remover produtos do carrinho e botão para finalizar a compra.\n\n- [Tela - Carrinho de compras com quantidades](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_10.png)\n\n**Observações técnicas**\n\nSão operações básicas de carrinho a alteração da quantidade de um determinado produto nele e a visualização de tudo o que foi adicionado, com a soma dos valores.\n\n  * Adicione elementos na página do carrinho de compras para aumentar ou diminuir a quantidade de cada produto presente no carrinho.\n  * Adicione o atributo `data-testid` com o valor `product-increase-quantity` no elemento que aumenta a quantidade de um produto. Adicione esse atributo para todos os produtos.\n  * Adicione o atributo `data-testid` com o valor `product-decrease-quantity` no elemento que diminui a quantidade de um produto. Adicione esse atributo para todos os produtos.\n\nO que será verificado:\n```\n  - Adiciona produtos ao carrinho e manipula suas quantidades\n```\n\n#### 11. Avalie e comente acerca de um produto em sua tela de exibição detalhada\n\n**PRIORIDADE 3** - Adicionar formulário ao produto, em sua exibição detalhada, para permitir adicionar avaliações com nota de 1 a 5 estrelas e comentários (o comentário deve ser opcional, sendo possível enviar apenas a nota). Exibir a lista de avaliações já feitas. Se quem usa sai e volta da tela, a nota e as avaliações não devem ser apagadas.\n\n- [Tela - Detalhamento do produto com avaliações](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_11.1.png)\n- [Tela - Detalhamento do produto com avaliações pregressas](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_11.2.png)\n\n**Observações técnicas**\n\nAvaliações positivas de um produto contribuem para boas vendas e nos dão insumos para, no tempo, destacarmos os produtos melhores e fazermos anúncios direcionados. Produtos ruins, de forma análoga, podem eventualmente ser penalizados por avaliações ruins.\n\n  * Adicione um campo de texto para que a pessoa que utiliza a aplicação possa escrever algo sobre o produto.\n  * Adicione o atributo `data-testid` com o valor `product-detail-evaluation` no campo de texto.\n\nO que será verificado:\n```\n  - Avalia um produto na sua tela de detalhes\n```\n\n#### 12. Finalize a compra vendo um resumo dela, preenchendo os seus dados e escolhendo a forma de pagamento\n\n**PRIORIDADE 4** - Implementar tela para a finalização da compra. A tela deve conter uma seção para revisão dos produtos com o valor total da compra, um formulário para ter as informações do comprador e um a seção para escolher o método de pagamento. Ao se clicar em \"Comprar\", deve-se validar que o formulário está preenchido e que a forma de pagamento foi escolhida e, em caso positivo, deve-se zerar o estado, redirecionar para a tela inicial (listagem de produtos). Caso algo não tenha sido preenchido, mantém-se na mesma tela com o dados sem apagar e destaca-se os campos não preenchidos em vermelho.\n\n- [Tela - Finalização de compra](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_12.png)\n\n**Observações técnicas**\n\nO último grande passo do fluxo do e-commerce é a finalização da compra por parte de quem usa.\n\n  * Adicione um botão para finalizar a compra. Este botão ao ser clicado, deve enviar os dados referente à lista para uma página de \"_checkout_\".\n  * Adicione o atributo `data-testid` com o valor `checkout-products` no botão que leva a pessoa à página de \"_checkout_\".\n  * A página de \"_checkout_\" deve apresentar a listagem dos produtos e o valor total da compra.\n  * A página de \"_checkout_\" também deve possuir elementos para que a pessoa insira os dados e finalize a compra.\n  * Elemento \"Nome completo\" deve possuir o atributo `data-testid` com o valor `checkout-fullname`.\n  * Elemento \"Email\" deve possuir o atributo `data-testid` com o valor `checkout-email`.\n  * Elemento \"CPF\" deve possuir o atributo `data-testid` com o valor `checkout-cpf`.\n  * Elemento \"Telefone\" deve possuir o atributo `data-testid` com o valor `checkout-phone`.\n  * Elemento \"CEP\" deve possuir o atributo `data-testid` com o valor `checkout-cep`.\n  * Elemento \"Endereço\" deve possuir o atributo `data-testid` com o valor `checkout-address`.\n  * (**Não avaliativo**) Você pode criar um botão que simule a compra desses produtos, na verdade, esse botão não precisa realizar nenhuma função específica.\n\nO que será verificado:\n```\n  - Faz os passos da compra com sucesso: recupera produtos de uma categoria; adiciona-os ao carrinho; faz o checkout; insere todos os dados\n```\n\n### Bônus\n\n#### 13. Mostre junto ao ícone do carrinho a quantidade de produtos dentro dele, em todas as telas em que ele aparece\n\n**PRIORIDADE 4** - Adicionar ao ícone do carrinho, em todas as telas em que ele aparece, um número com a quantidade de produtos adicionados.\n\n- [Tela - Listagem de produtos com carrinho e quantidade](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_13.png)\n\n**Observações técnicas**\n\nA partir de uma pesquisa com usuários e concorrentes, identificamos que existe a necessidade de uma visualização da quantidade de produtos do carrinho de uma forma dinâmica e acessível.\n\n  * Adicione o atributo `data-testid` com o valor `shopping-cart-size` no elemento que contém a quantidade de produtos presente na lista.\n  * A quantidade a ser exibida é o número total de itens, ou seja, se a pessoa adiciona o produto1 5 vezes e o produto2 2 vezes, o valor a ser exibido é 7.\n  * Esse elemento deve ser visível da página de listagem de produtos e da página de detalhes de produto.\n\nO que será verificado:\n```\n  - Vê a quantidade de produtos no carrinho da tela de listagem\n  - Vê a quantidade de produtos no carrinho da tela de detalhes\n```\n\n#### 14. Limite a quantidade de produtos adicionados ao carrinho pela quantidade disponível em estoque\n\n**PRIORIDADE 4** - Adicionar quantidade disponível do produto (disponível via chamada da API na chave \"available_quantity\") e limitar a compra de acordo com a quantidade em estoque. Desabilite os botões de (+) daquele produto na aplicação ao se alcançar a quantidade máxima dele no estoque.\n\n**Observações técnicas**\n\nProdutos tem disponibilidades limitadas. É uma péssima experiência de uso adicionar ao carrinho produtos que, no fim do processo, não se pode comprar.\n\nO que será verificado:\n```\n  - Não adiciona ao carrinho mais produtos do que o disponível em estoque\n```\n\n#### 15. Mostre quais produtos tem o frete grátis\n\n**PRIORIDADE 4** - Adicionar indicador de frete grátis à exibição resumida e detalhada do produto.\n\n- [Tela principal - Exibição detalhada de produto com frete gratis](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_15.1.png)\n- [Tela - Detalhamento de produto com frete gratis](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_15.2.png)\n\n**Observações técnicas**\n\nAs pessoas que vendem no Mercado Livre disponibilizam frete grátis a alguns produtos. Devemos incorporar isso ao e-commerce.\n\n  * Adicione um elemento que mostre essa informação para cada produto que possua frete grátis na tela de listagem.\n  * Adicione o atributo `data-testid` com o valor `free-shipping` em elementos que apresentem essa informação para todos os produtos que possuam frete grátis.\n\nO que será verificado:\n```\n  - Exibe corretamente a informação de frete grátis dos produtos\n```\n\n### Extras (não avaliativos):\n\n#### 16. Faça um layout para o site\n\n**PRIORIDADE 5** - Adicionar ao site um layout agradável para quem usa ter uma boa experiência.\n\n#### 17. Faça um layout responsivo para o site\n\n**PRIORIDADE 5** - Faça um layout responsivo completo, para telas pequenas.\n\n#### 18. Crie um seletor dropdown para ordenar a lista de produto por maior e menor preço\n\n**PRIORIDADE 5** - Criar um seletor dropdown que permite a lista de produtos ser ordenada por maior e menor preço.\n\n- [Tela principal - Ordenação por preço](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/bonus_ordering.png)\n\n#### 19. Coloque uma animação no carrinho para quando um produto for adicionado\n\n**PRIORIDADE 5** - Coloque uma animação no carrinho quando adicionar/remover um produto.\n\n#### 20. Crie um slider lateral para exibir o carrinho na tela principal\n\n**PRIORIDADE 5** - Exibir 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).\n\n- [Tela - Listagem com carrinho populado.png](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/bonus_slider.1.png)\n- [Tela - Listagem com carrinho vazio.png](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/bonus_slider.1.png)\n\n#### 21. Destaque, na tela principal, os produtos já adicionados ao carrinho\n\n**PRIORIDADE 5** - Destacar produtos que já foram adicionados ao carrinho, diferenciando-o dos demais produtos da lista da página principal (veja os detalhes no card).\n\n- [Tela - Listagem com destaque.png](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/bonus_marked_product.png)\n\n#### 22. Impeça que a quantidade do produto seja negativa\n\n**PRIORIDADE 5** - Da tela de detalhamento de produto, permitir alterar a quantidade daquele produto no carrinho, se ele estiver lá, com botões (-) e (+). A quantidade não pode ser negativa (veja detalhes no card).\n\n- [Tela - Detalhamento do produto com quantidade.png](https://github.com/tryber/sd-010-a-project-frontend-online-store/tree/master/wireframes/card_09.png)\n\n---\n\n# Avisos finais\n\nAo finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!\n\nLink: [FORMULÁRIO DE AVALIAÇÃO DE PROJETO](https://bit.ly/39qMu3s)\n\nO avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no readme. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flmuffato%2Fproject-frontend-online-store-trybe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flmuffato%2Fproject-frontend-online-store-trybe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flmuffato%2Fproject-frontend-online-store-trybe/lists"}