/fincheck

Sistema de Controle de Finanças

Primary LanguageTypeScript

fincheck

O Fincheck é uma aplicação voltada para o controle de finanças. Nele você pode gerenciar os seus gastos de uma forma otimizada, através do controle de suas contas bancárias, categorias de gastos e transações. Esse projeto foi desenvolvido utilizando algumas das stacks mais novas do mercado.

Tópicos

Instalando e rodando o projeto localmente:

Para rodar o Fincheck em sua máquina é bem simples.

Você precisa ter instalado:

  • Node.js v18
  • Docker v4.17.1 e utilizar a imagem Postgres (https://hub.docker.com/_/postgres)
  • NPM, Yarn ou yarn para a instalação dos pacotes (projeto desenvolvido com yarn)

Para a instalação dos pacotes você deve entrar em cada pasta individualmente e rodar o comando yarn, pois neste projeto temos o backend e o frontend.

Navegue para ../api e rode no terminal o comando:

yarn

Repita esse passo para ../frontend.

Por padrão, o banco de dados vem totalmente vazio. Então para facilitar vou deixar uma Collection que fiz com o Insomnia, para o gerenciamento completo da aplicação, (CRIAR, LISTAR E DELETAR USUÁRIOS, CONTAS BANCÁRIAS, CATEGORIAS E TRANSAÇÕES)

Clique aqui para fazer o download

Exemplo: Dentro do Insomnia basta importar a Collection do Fincheck e começar a usar. Vale lembrar que foi utilizado o token JWT para a autenticação, então eu exportei junto com a collection as variáveis de ambiente. Basta fazer o signup de uma nova conta, copiar e colar o token gerado dentro das variáveis de ambiente, como accessTokens.User1. E no Insomnia, na aba de Auth, selecionar Bearer e apertar Crtl + Space e selecionar o User1. Por padrão todos os tokens tem validade de 7 dias.

Rotas

Lembre-se de alterar as rotas da aplicação nos arquivos:

\api\src\main.ts altere o valor de app.listen() para a porta que você deseja que o banco rode.

\api\src\main.ts altere o valor da propriedade origin para a rote em que o seu frontend vai rodar.

E mais um detalhe, a porta padrão do frontend foi definida para :3000, e da api para :4000.

Pronto, agora você está preparado para utilizar esta aplicação. Para iniciar a api basta rodar yarn start:dev ou yarn start:docker caso o processo do Docker esteja parado no Windows, em sua respectiva pasta. E para iniciar o frontend basta rodar yarn dev em sua respectiva pasta.

Stack utilizada

Back-end:

  • Node.js
  • NestJs
  • Prisma
  • BCryptjs
  • Docker
  • Postgres
  • TypeScript

Front-end:

  • Vite
  • React
  • TypeScript
  • TailwindCSS
  • React Hook Forms (com Zod)
  • React Query
  • Radix UI (components e icones)
  • React Hot Toast
  • Swiper

Em ambos foram utilizados o EditorConfig e Eslint para o desenvolvimento.

Made with 💜 by Mateus Jesus