Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joaoespacheco/trybe-project-11-shopping-cart
Aplicação que simula funcionalidades de um carrinho de compras online
https://github.com/joaoespacheco/trybe-project-11-shopping-cart
css fetch-api html javascript jest tdd unit-test
Last synced: 23 days ago
JSON representation
Aplicação que simula funcionalidades de um carrinho de compras online
- Host: GitHub
- URL: https://github.com/joaoespacheco/trybe-project-11-shopping-cart
- Owner: joaoespacheco
- Created: 2022-11-14T21:13:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-12T02:02:36.000Z (about 2 years ago)
- Last Synced: 2024-11-21T17:11:45.261Z (3 months ago)
- Topics: css, fetch-api, html, javascript, jest, tdd, unit-test
- Language: JavaScript
- Homepage: https://shopping-cart-joaoespacheco.vercel.app
- Size: 713 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopping Cart 🛒
## 📄 Sobre:
Projeto desenvolvido durante o módulo de front-end do curso de desenvolvimento web da [Trybe](https://www.betrybe.com/).
Neste projeto foi desenvolvido uma página web dinâmica, simulando o comportamento de uma aplicação de compras.
Os dados dos produtos utilizados foram obtidos através da [API](https://developers.mercadolivre.com.br/pt_br/itens-e-buscas) do Mercado Livre.
Além das tarefas realizadas com funções assíncronas durante as requisições, também foram implementados neste projeto testes unitários com enfâse na metodologia de TDD ([Test Driven Development](https://www.devmedia.com.br/test-driven-development-tdd-simples-e-pratico/18533)).
Desempenho
Aprovado com 100% de desempenho em todos os requisitos![image](https://user-images.githubusercontent.com/99846604/211168949-ca28fde5-89f2-4327-b0a1-327b2e808be3.png)
Requisitos
Requisitos obrigatórios:
1. (TDD) Desenvolva testes de no mínimo 25% de cobertura total e 100% da função `fetchProducts`
2. Crie uma listagem de produtos
3. (TDD) Desenvolva testes de no mínimo 50% de cobertura total e 100% da função `fetchItem`
4. Adicione o produto ao carrinho de compras
5. Remova o item do carrinho de compras ao clicar nele
6. (TDD) Desenvolva testes de no mínimo 75% de cobertura total e 100% da função `saveCartItems`
7. (TDD) Desenvolva testes para atingir 100% de cobertura total e 100% da função `getSavedCartItems`
8. Carregue o carrinho de compras ao iniciar a página
9. Calcule o valor total dos itens do carrinho de compras
10. Limpe o carrinho de compras
11. Adicione um texto de `carregando` durante uma requisição à APIImagens do projeto
### Tela principal:
![image](https://user-images.githubusercontent.com/99846604/211168924-ba69bed1-431a-4f98-91f0-98ca0772d106.png)
### [👨💻 Clique aqui para acessar o projeto em seu navegador](https://shopping-cart-joaoespacheco.vercel.app/)
## ⚙️ Execução
Faça o clone deste repositório utilizando o comando abaixo:
git clone [email protected]:joaoespacheco/Trybe-Project-11-shopping-cart.git
Dentro da pasta raiz do projeto, instale as dependências com o seguinte comando:
npm install
Para exeutar os testes deve-se utilizar o seguinte comando:
npm test
Caso queira executar um teste específico, rode o comando abaixo:
npm test
Para executar e verificar a cobertura de testes, rode o comando abaixo:
npm run test:coverage
## 🤹🏽 Habilidades Desenvolvidas:
* Uso de funções assíncronas e requisições para API's
* Implementação de testes unitários e utilização de metodologia TDD
* Desenvolvimento de uma página web dinâmica utilizando HTML, CSS e JavaScript## 🧰 Ferramentas:
* HTML5
* CSS3
* JavaScript
* Jest## 📝 Desenvolvido por:
* [João Emanuel Soares Pacheco](https://github.com/joaoespacheco)