senfinaça ·

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.

Preview - Protótipo

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

Dashboard

Cadastro de transação

Filtros

Filtros implementados:

• Tipo
• Categoria
• Palavra chave (Título)

Requirements

• Node.js LTS release or greater
• Yarn (opcional)
• Git

Built With

• React (17.0.2)
• Typescript (4.1.2)

Documentation

• React JS
• Unform
• Cloud Firestore

Quick running

Assumindo que o Git e o NodeJS LTS estão instalados, é possível seguir os seguintes passos:

1. Faça clone do projeto e vá para a raiz do repositório

   git clone https://github.com/ozielalves/senfinanca.git && cd senfinanca/

2. Na raiz do repositório, instale as dependências necessárias

   npm install
   
   # or
   
   yarn install

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

Criando build de produção

   npm run build

   # or

   yarn run build

Folder Structure

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

Observação

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!

Contribuições

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.

Support

• Twitter @ozielvales | E-mail

Author

• Oziel Alves