Pular para o conteúdo principal
← Voltar aos projetos HEROw Company

HEROw Company

Fastify Node.js React PostgreSQL Zustand TypeScript

Visão Geral

O HEROw Company nasceu de um problema bem concreto: com o portfólio do HEROw Code crescendo, ficou inviável controlar receitas, despesas, clientes e fornecedores de cada projeto em planilhas separadas - e misturar tudo em uma única visão tornava impossível entender a saúde de cada iniciativa individualmente. O que eu precisava era de um jeito de tratar cada projeto como uma organização independente, sem perder a capacidade de enxergar o portfólio como um todo.

A solução foi construir uma plataforma própria de gestão financeira multi-organização, onde cada projeto vira uma organização com suas próprias contas, categorias, transações, pessoas e configurações. No backend, implementei um serviço em Node.js com Fastify, PostgreSQL e Clean Architecture para garantir isolamento por organização, rastreabilidade e uma External API segura. No frontend, construí uma SPA em React focada em uso diário, com dashboards personalizáveis por widgets drag-and-drop.

Dentro de cada organização, é possível controlar fluxo de caixa, breakdown por categoria, origem e período, além de vincular clientes e fornecedores diretamente às transações. Jobs assíncronos cuidam de resumos por email, reconciliações e tarefas recorrentes, liberando a interface para respostas rápidas. A partir dessa base, passo a ter uma visão consolidada de todo o portfólio, sem abrir mão do detalhe financeiro de cada projeto.

Além do produto em si, o HEROw Company também é uma vitrine de como estruturo projetos full-stack com foco em DX: scripts de setup, seeds e fixtures tornam o ambiente de desenvolvimento previsível e replicável, reduzindo o atrito para experimentar novas features e evoluir a arquitetura sem perder controle da complexidade.

Diferencial Principal

O principal diferencial do HEROw Company é tratar multi-organização como um requisito de primeira classe, não como um pós-pensamento. Cada projeto é um tenant isolado com contas, pessoas, configurações, chaves de API e limites próprios, e isso se reflete em todo o design da aplicação: da modelagem no PostgreSQL à forma como as rotas são protegidas e como os jobs assíncronos são disparados.

Do lado do produto, o sistema não é apenas um “dashboard de métricas”: ele foi pensado para uso operacional diário. O usuário monta o próprio painel financeiro por organização usando widgets drag-and-drop - fluxo de caixa, categorias, comparativos mensais - e ajusta a tela de trabalho para o que realmente precisa acompanhar naquele projeto específico.

Por fim, há um compromisso explícito com experiência do desenvolvedor: desde scripts de bootstrap e seeds para subir o ambiente com dados reais de teste, até uma arquitetura em camadas bem definida no backend. Isso reduz o custo de manutenção, facilita onboardings futuros e transforma o projeto em uma base reusável para outros produtos do ecossistema HEROw Code.

Arquitetura

  • API Backend (Fastify + Node.js): servidor HTTP responsável por autenticação, autorização, validações, exposição da External API e orquestração das regras de negócio.
  • Camada de Multi-Organização (Tenant Context): resolve a organização ativa em cada requisição, aplica escopos de acesso e garante segregação de dados entre projetos.
  • Módulo de Finanças: gerenciamento de contas, categorias, transações, transferências, recorrências e geração de relatórios de fluxo de caixa por período.
  • Módulo de Pessoas: cadastro e vinculação de clientes/fornecedores às transações, permitindo relatórios por contraparte.
  • Módulo de Organizações: criação, configuração, convites de membros e gerenciamento de permissões por organização.
  • External API Layer: emissão e gerenciamento de API Keys, escopos, rate limiting por organização e auditoria de chamadas.
  • Banco de Dados PostgreSQL: armazenamento relacional das entidades centrais (organizações, usuários, pessoas, contas, lançamentos, categorias, tokens de API).
  • Fila de Jobs Assíncronos: processamento em segundo plano de emails (resumos diários/semanais), reconciliações e tarefas agendadas para não bloquear requisições síncronas.
  • Frontend SPA em React: interface principal de gestão, com navegação por organizações, telas de fluxo de caixa, cadastros e relatórios.
  • Dashboard de Widgets Drag-and-Drop: camada de composição visual que permite ao usuário montar e reordenar widgets financeiros por organização.
  • Camada de Estado e Cache (Zustand + client cache): gerencia estado global, sincronia com a API e feedback otimista de operações.
  • Design System com TailwindCSS + Radix UI: base de componentes acessíveis e estilização consistente para garantir responsividade e uso intenso no dia a dia.
  • Validação de Dados com Zod: schemas compartilhados para tipagem e validação de payloads entre backend e frontend.

Destaques Técnicos

  • Implementação de multi-organização ponta a ponta: isolamento lógico por tenant em banco, camada de autorização e External API, evitando vazamento de dados entre projetos.
  • Backend em Node.js + Fastify seguindo Clean Architecture, com separação clara entre domínio, casos de uso, adaptadores HTTP e infraestrutura.
  • External API com API Keys, escopos e rate limiting por organização, permitindo integrações programáticas seguras e controladas por projeto.
  • Uso de jobs assíncronos para resumos por email, reconciliações e tarefas recorrentes, tirando carga do caminho síncrono e deixando o app mais responsivo.
  • Frontend em React com dashboard de widgets drag-and-drop, pensado para uso diário intensivo em múltiplas organizações.
  • Gestão de estado com Zustand e cache de dados em cliente, reduzindo chamadas redundantes e melhorando a experiência em telas de consulta pesada.
  • UI responsiva construída com TailwindCSS + Radix UI, garantindo acessibilidade e consistência visual nas principais superfícies da aplicação.
  • Validações centralizadas com Zod, reaproveitando schemas de tipos entre camadas e reduzindo bugs por payloads malformados.
  • Foco em DX: scripts de setup, seeds e fixtures que permitem subir o ambiente com dados realistas em poucos comandos, facilitando desenvolvimento e debugging.
  • Modelagem orientada a rastreabilidade financeira por projeto, com relatórios estruturados por fluxo de caixa, categoria, origem e período, sem mistura de dados entre organizações.

Galeria