Skip to content

O senfinança é uma aplicação para gerenciar transações.

Notifications You must be signed in to change notification settings

ozielalves/senfinanca

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

senfinaça · npm PRs Welcome

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.

Dashboard

Dashboard

Cadastro de transação

Cadastro de transações

Filtros

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

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:

Cadastro de transações

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

Author