O senfinança é uma aplicação para gerenciar transações. Uma vez no site, o usuário pode cadastrar transações de entrada (crédito) ou saída (débito) e acompanhar suas finanças de maneira simplificada e direto ao ponto.
A Single Page Application (SPA) foi desenvolvida usando React JS e consome dados de um banco NoSQL, Cloud Firestore. Além de React e Firebase, outras tecnologias foram utilizadas no projeto, tais como: TypeScript, Material UI, Recharts, Styled Components e mais.
É possível visualizar dados de transações anteriores, editar ou deletar se for necessário. Além disso também é possível acompanhar as transações do mês através do gráfico, totalizações de entradas e saídas, e também o saldo restante.
- Tipo
- Categoria
- Palavra chave (Título)
- Node.js LTS release or greater
- Yarn (opcional)
- Git
- React (17.0.2)
- Typescript (4.1.2)
Assumindo que o Git e o NodeJS LTS estão instalados, é possível seguir os seguintes passos:
-
Faça clone do projeto e vá para a raiz do repositório
git clone https://github.com/ozielalves/senfinanca.git && cd senfinanca/
-
Na raiz do repositório, instale as dependências necessárias
npm install # or yarn install
-
Rodando o projeto localmente
npm start # or yarn start
Pronto! Será exibida a seguinte mensagem e já é possível codar:
Compiled successfully!
You can now view senfinancas in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.2.111:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
npm run build
# or
yarn run build
senfinanca
├───public
└───src
├───assets
│ ├───icons
│ └───images
├───components
│ ├───Button
│ ├───Chart
│ ├───ColoredCard
│ ├───Copyright
│ ├───Filters
│ │ ├───Dropdown
│ │ └───Search
│ ├───FinanceStatus
│ ├───Form
│ │ ├───Select
│ │ └───TextField
│ ├───Header
│ ├───Modal
│ │ ├───Deletion
│ │ ├───Register
│ │ └───Selection
│ ├───Paper
│ ├───SnackbarWapper
│ └───Table
├───hooks
├───models
│ ├───Filter
│ └───Transaction
├───pages
│ └───Dashboard
├───services
│ └───utils
└───theme
Para amantes do dark mode (eu incluso), utilizo uma extensão que realiza essa transição automática, o Dark Reader, e adorei o resultado quando aplicado no senfinança:
Como primeiro TODO eu coloco a implementação do dark mode!
Fique a vontade para contribuir! Basta criar Pull Requests.
Para maiores modificações, por favor, abrir uma issue para discutir o que deve ser modificado.