Este projeto contém os requisitos realizados por Anna Beatriz Garcia Trajano de Sá enquanto estudava na Trybe 🚀

Project TrybeWallet

Neste projeto desenvolvi uma carteira de controle de gastos com conversor de moedas. Ao utilizar essa aplicação um usuário deverá ser capaz de:

• Adicionar, remover e editar um gasto;
• Visualizar uma tabelas com seus gastos;
• Visualizar o total de gastos convertidos para uma moeda de escolha;

Veja o exemplo a seguir do layout do projeto!

Layout

Login Page 1	Login Page 2

Wallet Page 1	Wallet Page 2

Link para o deploy:

TrybeWallet

Instalação do projeto localmente:

Após cada um dos passos, haverá um exemplo do comando a ser digitado para fazer o que está sendo pedido, caso tenha dificuldades e o exemplo não seja suficiente, não hesite em me contatar em annagarcia@id.uff.br

1. Abra o terminal e crie um diretório no local de sua preferência com o comando mkdir:

  mkdir projetos

2. Entre no diretório que acabou de criar e depois clone o projeto:

  cd projetos
  git clone git@github.com:annabia95/project-trybewallet-.git

3. Acesse o diretório do projeto e depois utilize o comando npm i para instalar todas as dependências necessárias:

  cd project-trybewallet-
  npm i

4. Por último, rode o comando npm start e acesse o projeto via browser, no caminho http://localhost:3000/project-trybewallet-.

  npm start

Habilidades Desenvolvidas

Neste projeto, desenvolvi as seguintes habilidades:

• 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.

Referências

Redux Fundamentals
Redux DevTools
Desvendando o Redux na prática
Font Awesome

Escopo do Projeto

Página de Login

• Crie uma página inicial de login.

Página da Carteira

Configurando sua página

• Crie uma página para sua carteira.
• Crie um header para a página de carteira.

Formulário de adição de Despesa

• Implemente a lógica para armazenar no estado global as siglas das moedas que vêm da API.
• Desenvolva um formulário para adicionar uma despesa.
• Salve todas as informações do formulário no estado global.

Tabela de Gastos

• Desenvolva uma tabela com os gastos.
• Implemente a lógica para que a tabela seja alimentada pelo estado da aplicação.
• Crie um botão para deletar uma despesa da tabela.