Git Product home page Git Product logo

larissasimoes / trybe_wallet Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 380 KB

Uma aplicação de carteira na qual os usuários podem gerenciar seus gastos, adicionar, editar e remover despesas, além de visualizar um resumo em uma tabela com o total convertido para uma moeda escolhida. O projeto demonstra habilidades em Redux, React, e testes, oferecendo uma experiência prática e funcional para o controle financeiro pessoal.

HTML 5.53% CSS 3.01% JavaScript 91.47%
javascript reactjs redux testes

trybe_wallet's Introduction

Trybewallet

Projeto desenvolvido como parte da avaliação no curso da Trybe. A Trybewallet é uma aplicação de controle de gastos com conversor de moedas, permitindo que o usuário adicione, remova, edite gastos e visualize um resumo em uma tabela, incluindo o total de gastos convertidos para uma moeda específica.

Funcionalidades

  • Login:

    • Página inicial de login na rota /.
    • Campos para inserção de e-mail e senha.
    • Botão "Entrar" para efetuar o login.
  • Página da Carteira:

    • Rota /carteira.

    Header

    • Exibe o e-mail da pessoa usuária.
    • Mostra a despesa total.
    • Indica a moeda de câmbio em uso.

    Formulário para Adicionar Despesa

    • Componente WalletForm dentro do componente Wallet.
    • Campos para valor da despesa, descrição, seleção de moeda, método de pagamento e categoria.
    • Botão "Adicionar despesa" para salvar as informações no estado global.

    Tabela de Gastos

    • Componente Table dentro do componente Wallet.
    • Cabeçalho da tabela com as colunas: Descrição, Tag, Método de pagamento, Valor, Moeda, Câmbio utilizado, Valor convertido, Moeda de conversão, Editar/Excluir.

    Funcionalidades da Tabela

    • Alimentada pelo estado da aplicação (chave expenses do reducer wallet).
    • Botão de "Excluir" em cada linha.
    • Ao clicar em "Excluir":
      • A despesa é removida do estado global.
      • A despesa deixa de ser exibida na tabela.
      • O valor total no header é atualizado.

Habilidades Demonstradas

  • Criar e gerenciar um store Redux em aplicações React.
  • Implementar reducers, actions, e dispatchers no Redux em aplicações React.
  • Conectar Redux aos componentes React.
  • Criar actions assíncronas na aplicação React que fazem uso do Redux.

Testes

  • Desenvolvidos testes para alcançar uma cobertura total de 60% da aplicação.

Instruções para executar o projeto:

  1. Clone o repositório.
  2. Instale as dependências com npm install.
  3. Execute a aplicação com npm start.
  4. Abra o navegador e acesse http://localhost:3000.

Divirta-se controlando seus gastos com a Trybewallet! 😊

trybe_wallet's People

Contributors

larissasimoes avatar trybe-tech-ops avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.