Trybe Wallet

Décimo oitavo projeto realizado na Trybe onde foi necessário demonstrar os conhecimentos adquiridos com Redux aplicados a React. Como trabalho extra, foi realizada toda a estilização e recursividade da aplicação com Tailwind e Framer Motion.!

https://brunoCabralSilva.github.io/trybe-18-wallet/

Descrição do Projeto

Neste projeto foi possível desenvolver uma carteira de controle de gastos com conversor de moedas, onde ao utilizar essa aplicação um usuário poderá ser capaz de:

Adicionar, remover e editar um gasto (estando este último ainda em desenvolvimento);
Visualizar uma tabela com seus gastos;
Visualizar o total de gastos convertidos para uma moeda de escolha;

Neste projeto, a trybe foi capaz de verificar a capacidade de:

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.

Mapeamento do site

Página inicial do site. O botão de "Login" só é habilitado se um e-mail válido for digitado, bem como uma senha de seis dígitos. Ao clicar em "Adicionar despesa" é realizada uma pesquisa na API "https://economia.awesomeapi.com.br/json/all", que retorna o câmbio atual das moedas utilizadas para a aplicação. Desta forma, ao exibir a conversão, o valor disponibilizado será do câmbio no momento exato do click em que for cadastrada a despesa.

Wallet

Ao realizar o Login, o usuário é direcionado para a página denominada "carteira", onde ele pode cadastrar e excluir despesas. A página se divide em três blocos principais:

Cabeçalho: É possível visualizar em tela o e-mail cadastrado outrora pelo usuário ao realizar o login, além do valor total das despesas cadastradas e da moeda de conversão, que é o Real do Brasil(R$);
Cadastro de Despesas: Quadro lateral onde é possível cadastrar a despesa ao informar o valor da despesa, uma descrição sobre ela, a moeda a ser convertida para Real(R$), a forma de pagamento e em qual categoria a mesma se encaixa;
Tabela de Despesas:Nesta área principal é possível visualizar as despesas com todas as informações cadastradas espalhadas nas colunas que trazem informações dedescrição, tag (categoria), método de pagamento, valor, moeda, câmbio utilizado, valor convertido e moeda de conversão. Além disso, para cada despesa cadastrada, existem botões de excluir e editar, para que as despesas sejam excluídas ou editadas, conforme o nome dos botões.

Tecnologias utilizadas

HTML5
CSS3
Javascript (ECMAScript 2018)
React
React Router Dom
Framer Motion
TailWind

Desenvolvedores e demais contribuidores

Bruno Gabryell Cabral da Silva - Desenvolvedor Web;

Conclusão

Programar é um eterno aprendizado. Quanto mais se pratica, mais se melhora. Praticar conceitos de programação com coisas que se é apaixonado apimenta ainda mais a relação! Muitos aprendizados novos são adicionados a cada dia, fazendo com que este projeto já tenha valido a pena antes mesmo de ser concluído!

Marcio-Gabriel-Roque-Mendes/trybe-18-wallet