Fincheck — Web

App de financas pessoais para controlar contas bancarias, receitas e despesas.

Funcionalidades

• Autenticacao (signup/signin) com JWT
• Dashboard com visao geral das financas
• Gerenciar multiplas contas bancarias com saldo
• Registrar receitas e despesas com categorias
• Filtrar transacoes por mes, ano, conta e tipo
• Layout responsivo (desktop e mobile)

Tech Stack

Tecnologia	Uso
React 19	UI
TypeScript	Tipagem
TailwindCSS 4	Estilizacao
Vite	Build/dev server
React Query (TanStack)	Estado do servidor
React Hook Form + Zod	Formularios e validacao
React Router DOM v7	Rotas
Radix UI + Headless UI	Componentes acessiveis
Axios	Cliente HTTP
Swiper	Slider de contas bancarias

Como Rodar

Pre-requisitos: Node.js 22+ com pnpm e Fincheck API rodando.

git clone https://github.com/mbdevlabs/fincheck-web.git
cd fincheck-web
pnpm install
cp .env.example .env   # configurar URL da API
pnpm dev

Acesse http://localhost:5173.

CI/CD

• CI: GitHub Actions — lint, typecheck e testes a cada push/PR na main
• CD: AWS CodeBuild — build, deploy para S3 e invalidacao do CloudFront

Servico	Uso
AWS CodeBuild	Build e deploy automatizado
AWS S3	Hospedagem dos arquivos estaticos
AWS CloudFront	CDN e distribuicao

Estrutura

src/
  app/
    config/        → Constantes e configuracao
    contexts/      → AuthContext (autenticacao)
    hooks/         → useAuth, useWindowWidth
    services/      → Camada HTTP (Axios)
    utils/         → cn(), formatCurrency()
  view/
    components/    → Componentes reutilizaveis (Button, Logo, icons)
    layouts/       → Layouts de pagina
    pages/
      Dashboard/   → Tela principal (contas + transacoes)
      Login/       → Tela de login
      Register/    → Tela de cadastro
  Router/          → Configuracao de rotas

Variaveis de Ambiente

Variavel	Descricao
VITE_API_URL	URL da API do Fincheck

Relacionados

• Fincheck API — Backend REST