Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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 à API

Imagens 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)