A ideia deste projeto surgiu em um momento do dia a dia enquanto cortava o cabelo com um amigo do meu bairro. Durante a conversa, percebi a dificuldade que ele tinha em manter um controle claro das suas finanças.
A partir disso, identifiquei a necessidade de uma ferramenta simples, direta e fácil de usar, principalmente considerando que ele é uma pessoa com uma idade mais avançada e precisa de algo intuitivo, sem complexidade.
Com isso, surgiu a proposta de desenvolver uma aplicação web prática, focada em ajudar no controle de recebimentos, despesas e na visualização rápida de lucro ou prejuízo.
O dashboard funciona como a tela principal de navegação do sistema, apresentando uma visão geral dos dados financeiros com base no período selecionado pelo usuário por meio de um componente de navegação.
Nela é possível acompanhar:
- Total de recebimentos
- Total de despesas
- Indicador de lucro ou prejuízo
Além disso, o dashboard exibe um gráfico de recebimentos, permitindo a análise ao longo do tempo a partir de um filtro que define a quantidade de meses anteriores.
Nesta tela, o usuário pode:
- Adicionar novos recebimentos
- Visualizar lista de entradas financeiras
- Filtrar por período
- Acompanhar valores acumulados
Nesta tela, o usuário pode registrar despesas informando descrição, valor e data de referência.
Além disso, são exibidos:
- Lista com todas as despesas cadastradas
- Informações detalhadas de cada lançamento
- Total das despesas no período
O projeto foi desenvolvido utilizando as seguintes tecnologias:
- Frontend: React, TypeScript
- UI: Material UI (MUI)
- Backend / BaaS: Firebase
- **Banco de dados: **No-SQL
- **Arquitetura: **Me basiei na arquitetura limpa
- **Metodologia para criar componente: **Atomic Design
- Outras ferramentas: Vite, ESLint, Prettier, React Router Dom, Zod, React Query.
Você pode acessar o sistema através do link abaixo:
Para testar a aplicação, utilize as credenciais abaixo:
- Usuário: teste@hotmail.com
- Senha: 123456