Despesas App

Sempre gostei de calcular minhas despesas para que não houvesse surpresas no fim do mês e poder controlar meus gastos.

E após concluir o projeto TrybeWallet, me surgiu a ideia de mudar um pouco o funcionamento do projeto, reiniciar do zero tudo, e simular um planejamento de projeto do zero.

Eu vou levantar os requisitos funcionais, fazer brainstorm de ideias, criar um quadro Kanban e fazer "sprints".

Tecnologias que pretendo usar:

1. React;
   • Context API;
   • Hooks;
2. React Icons;
3. React Router;
4. Styled Components;
5. Outros conforme a necessidade ;

Objetos e Atores da aplicação:

1. Usuário

• Nome - string;

2. Despesa

• ID - gerado automaticamente - string;
• Nome da Despesa - string;
• Tipo da Despesas - [Conta, Cartão, Trabalho, Comida, ..., Lazer, Outros];
• Descrição - string;
• Valor - number;
• Data de criaçào ou data da despesa* - date;

Levantamento de Requisitos Funcionais:

1. Fazer Login - somente nome;
2. Adicionar Despesas;
3. Mostrar "extrato" de despesas;
4. Calcular total de despesas;
5. Excluir despesas;
6. Editar despesas;
7. Filtrar despesas;
8. Salvar no LocalStorage - ainda não aprendi arquitetar um DB;
9. Outros conforme surge ideias ;

Levantamento de Requisitos Não Funcionais:

1. Ter um deploy do projeto no GitHub Pages.
2. Outros conforme surge ideias ;

Metodologia e estudos

• Uso do Kanban usando a plataforma Trello para organização;
• Usar um quadro pra cada Requisito Funcional;
• Para cada Requesito Funcional será feito brainstorm de ideias;
• Filtrar as melhores ideias e criar tasks referentes no Quadro;
• Estudar e usar o paradigma de programação funcional;
• Aprender Jest com uso do Context API;

Quadro da aplicação

RF01 - Fazer Login

• O que é preciso pra atingir o objetivo do requisito:
  • Criar uma página de Login;
  • Usar a rota "/" da aplição;
  • Usar somente nome para fazer Login;
  • Criar uma chave name no context da aplicação;
  • Criar um botão para entrar;

RF02 - Adicionar Despesas

• O que é preciso pra atingir o objetivo do requisito:
  • Criar uma chave expenses no context da aplicação, será uma lista de objetos;
  • Criar um formulário para preencher as informaçòes.
  • Criar um botão para adicionar a despesa na aplicação (adicionar como valor da chave expenses);

RF03 - Mostrar "extrato" de despesas

• O que é preciso pra atingir o objetivo do requisito:

  • Renderizar as despesas (coletar da chaves expense);
  • No mobile mostrar um lista de componentes de conteúdo expansível para cada despesa;
  • No desktop mostrar uma tabela com as despesas;

  Quadro do RF03

RF04 - Calcular total de despesas

• O que é preciso pra atingir o objetivo do requisito:

  • Calcular os valores de todas as despesas salvas na chave expense;
  • Criar um componente Total pra mostrar de forma destacada o total;
  • Alimentar o componente Total com o valor calculado das despesas;

  Quadro do RF04

Estilização da aplicação

• Aplicação responsiva - Mobile First;
• Criar conjunto de componentes para cada tela diferente;
• Usar Styled Components;
• Paleta de cores
  • Cor primária: #6D3278;
  • Cor Secundária: #F9F3FC;
  • Cor de Fundo: #F9F3FC;
  • Outras cores conforme o andamento ;
• Pedir ajuda para colegas com criatividades e efeitos;

Wireframes

Wireframe para telas pequenas

Wireframe para telas desktop