Metawallet é uma aplicação desenvolvida em React.js para controle de gastos pessoais. Nela, é possível fazer login e adicionar despesas com valor, descrição, moeda, método de pagamento e tag/tipo de despesa. As despesas contam com um valor de câmbio atualizado no momento da adição pela API e um valor convertido para Real (BRL). Além disso, é possível editar a descrição, tag, método de pagamento, valor e moeda da despesa. No header, é exibido o valor total das despesas.
- Veja o post sobre a aplicação no LinkedIn aqui.
- Acesse o deploy da aplicação aqui
Informações para utilizar a aplicação no deploy
- Para logar, o email deve estar no padrão
user@email.com
, e a senha ter mais do que6 caracteres
.
- Bem-vindo ao projeto Metawallet
- Visualização
- Contexto
- Tecnologias e Ferramentas Utilizadas
- Instalação e Execução
- Notas
- Git, GitHub e Histórico de Commits
- Lint
A aplicação Metawallet é uma ferramenta de controle financeiro que permite que o usuário:
- Faça login e cadastre novas despesas com valor, descrição, moeda, método de pagamento e tag/tipo de despesa.
- Adicione um valor de câmbio para as despesas com moedas diferentes do Real (BRL), obtido no momento da adição pela API de economia/cotações.
- Converta automaticamente o valor da despesa para Real (BRL).
- Edite a descrição, tag, método de pagamento, valor e moeda da despesa.
- Visualize o valor total das despesas no header.
Este projeto utiliza as seguintes tecnologias e ferramentas:
- React.js com classes | Biblioteca para criar interfaces de usuário.
- Styled Components | Biblioteca para estilização do CSS.
- API de economia/cotações | API utilizada para obter informações sobre cotações de moedas e criptomoedas.
- Redux | Biblioteca de gerenciamento de estado.
O React.js foi escolhido por ser uma das bibliotecas mais populares e amplamente utilizadas para criar interfaces de usuário. Além disso, ele oferece suporte a programação orientada a objetos, o que é importante para o desenvolvimento de projetos maiores. O Styled Components foi escolhido porque permite que os desenvolvedores escrevam o CSS em formato de componente, o que torna o código mais legível e fácil de entender. A API de economia/cotações foi utilizada para obter informações atualizadas sobre cotações de moedas e criptomoedas, fornecendo informações precisas e detalhadas. O Redux foi utilizado para gerenciar o estado global da aplicação, tornando mais fácil a comunicação entre diferentes componentes e permitindo uma melhor organização do código.
git clone git@github.com:imsamuelcovalero/Project-Metawallet.git
cd Project-Metawallet
npm install
cd Project-Metawallet
npm start
Este projeto utilizou a Especificação de Commits Convencionais, com alguns tipos da convenção Angular. Além disso, foi utilizado o pacote conventional-commit-cli para ajudar a seguir a convenção de commits. É importante utilizar a convenção de commits em projetos para manter o histórico de commits organizado e facilitar a leitura e o entendimento do que foi desenvolvido.
- O projeto foi desenvolvido seguindo os padrões de Clean Code especificados pelo Lint da Trybe.