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-17-wallet

Aplicação React de uma carteira virtual com controle de gastos e conversão de moedas
https://github.com/joaoespacheco/trybe-project-17-wallet

css html javascript react react-router react-testing-library redux sass

Last synced: 18 days ago
JSON representation

Aplicação React de uma carteira virtual com controle de gastos e conversão de moedas

Awesome Lists containing this project

README 

        
# Wallet 💵



## 📄 Sobre:



Projeto desenvolvido durante o módulo de front-end do curso de desenvolvimento web da [Trybe](https://www.betrybe.com/).



Neste projeto foi desenvolvida uma aplicação de controle de gastos com conversor de moedas.



Dentro da carteira o usuário poderá:

> * Adicionar, remover e editar um gasto;

> * Visualizar uma tabelas com seus gastos;

> * Visualizar o total de gastos convertidos para uma moeda de sua escolha;



Todos os dados de cotação das moedas foram obtidos através da [Awesome API](https://docs.awesomeapi.com.br/api-de-moedas).



A aplicação também conta com o uso da biblioteca Redux para o gerenciamento do estado global e uma cobertura de testes superior a 90%.



Desempenho

Aprovado com 100% de desempenho em todos os requisitos



![image](https://user-images.githubusercontent.com/99846604/211172644-69c986ed-6eef-468e-aa7e-a698683e0bac.png)



Requisitos



Requisitos Obrigatórios: 



1. Crie uma página inicial de login com os seguintes campos e características 

2. Crie um header para a página de carteira contendo as seguintes características 

3. Desenvolva um formulário para adicionar uma despesa 

4. Salve todas as informações do formulário no estado global 

5. Desenvolva testes para atingir 60% de cobertura total da aplicação 

6. Desenvolva uma tabela com os gastos 

7. Implemente a lógica para que a tabela seja alimentada pelo estado da aplicação 

8. Crie um botão para deletar uma despesa da tabela 

9. Crie um botão para editar uma despesa da tabela 

10. Desenvolva testes para atingir 90% de cobertura total da aplicação 



Imagens do projeto



### Tela de login:



![image](https://user-images.githubusercontent.com/99846604/211172879-c7063d37-17ed-4cc3-9edf-4df863f687d6.png)



### Tela principal:



![image](https://user-images.githubusercontent.com/99846604/211172940-fb7518bf-ef0b-4085-9862-2e43e0b1ba4c.png)



### [👨‍💻 Clique aqui para acessar o projeto em seu navegador](https://wallet-joaoespacheco.vercel.app/) 



## ⚙️ Execução



Faça o clone deste repositório com o seguinte comando:



        git clone [email protected]:joaoespacheco/Trybe-Project-17-wallet.git



Dentro da pasta raiz do projeto, instale as dependências com o seguinte comando:



        npm install



Inicie a aplicação com o comando abaixo:



        npm start

        

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:

* Desenvolver uma aplicação react utilizando um gerenciador de estado global

  * Criar um store Redux em aplicações React

  * Criar reducers no Redux em aplicações React

  * Criar actions no Redux em aplicações React

  * Criar dispatchers no Redux em aplicações React

  * Conectar Redux aos componentes React

  * Criar actions assíncronas na sua aplicação React que faz uso de Redux.

* Utilizar cilos de vida de um componente

* Fazer requisições e consumir dados vindos de uma API

* Utilizar React Router

* Realizar testes utilizando React Testing Library



## 🧰 Ferramentas:

* HTML

* CSS

  * SASS

* JavaScript

* React

  * React Router

  * React Testing Library

  * Redux



## 📝 Desenvolvido por:

* [João Emanuel Soares Pacheco](https://github.com/joaoespacheco)