Skip to main content
JC
PT | EN
← Back to projects HEROw Company

HEROw Company

Fastify Node.js React PostgreSQL Zustand TypeScript
Visit project

Overview

HEROw Company was built to solve a very practical problem: as the HEROw Code portfolio grew, managing revenues, expenses, clients and vendors for multiple projects in spreadsheets became unmanageable. Keeping everything in a single financial view made it impossible to understand the health of each initiative, while splitting manually across files didn’t scale.

The platform turns each project into an independent organization inside the app, with its own accounts, categories, transactions, people and settings. On the backend, I implemented a Node.js service using Fastify, PostgreSQL and Clean Architecture to guarantee per-organization isolation, financial traceability and a secure External API. On the frontend, I built a React SPA optimized for daily use, with customizable dashboards powered by drag-and-drop widgets.

Within each organization, users can manage cash flow, category breakdowns, origins and time-based reports, while linking clients and vendors directly to transactions. Background jobs take care of email summaries, reconciliations and scheduled tasks, keeping the UI responsive under load. On top of that, the system provides a consolidated view of the entire portfolio without sacrificing per-project detail.

Beyond the product itself, HEROw Company serves as a reference implementation of how I structure full-stack projects with a strong DX focus: setup scripts, seeds and fixtures make the development environment reproducible, shorten onboarding time and make it safer to evolve the architecture as the system grows.

Key Differentiator

The core differentiator of HEROw Company is that multi-organization support is a first-class concern, not an afterthought. Each project is modeled as a fully isolated tenant with its own accounts, people, configuration, API keys and rate limits, and this is reflected across the entire stack-from PostgreSQL schema design to route protection and background processing.

From a product perspective, the system is not just a static analytics dashboard. It’s designed for day-to-day financial operations. Users compose their own per-organization financial workspace using drag-and-drop widgets-cash-flow charts, category splits, monthly comparisons-so each project can have the exact operational view it needs.

There is also an explicit commitment to developer experience and reproducibility. A clear layered architecture on the backend, together with scripts, seeds and fixtures, makes the codebase easier to reason about, test and extend. This turns HEROw Company into a reusable foundation for other applications in the HEROw Code ecosystem that need similar multi-tenant financial or operational capabilities.

Architecture

  • API Backend (Fastify + Node.js): HTTP server responsible for authentication, authorization, validation, External API exposure and orchestration of business rules.
  • Multi-Organization Layer (Tenant Context): resolves the active organization per request, enforces scoped access and guarantees strict data segregation between projects.
  • Finance Module: handles accounts, categories, transactions, transfers, recurring entries and cash-flow reporting by period.
  • People Module: manages clients/suppliers and links them to transactions to enable counterpart-based reporting.
  • Organizations Module: creation and configuration of organizations, member invitations and permission management.
  • External API Layer: manages API Keys, scopes, per-organization rate limiting and request auditing for integrations.
  • PostgreSQL Database: relational storage for core entities (organizations, users, people, accounts, entries, categories, API tokens).
  • Asynchronous Job Queue: background workers for email summaries (daily/weekly), reconciliations and scheduled tasks to keep heavy work off the request path.
  • React SPA Frontend: main management interface with organization-aware navigation, cash-flow screens, CRUDs and reporting views.
  • Drag-and-Drop Dashboard Widgets: composable UI layer that lets users build and reorder financial widgets per organization.
  • State & Cache Layer (Zustand + client cache): manages global state, server synchronization and optimistic updates for a smoother UX.
  • Design System with TailwindCSS + Radix UI: accessible, consistent UI components and responsive styling for intensive daily usage.
  • Data Validation with Zod: shared schemas for type-safe validation of payloads across backend and frontend.

Technical Highlights

  • End-to-end multi-organization design: tenant isolation enforced at database, authorization and External API layers, avoiding cross-project data leaks.
  • Node.js + Fastify backend implemented using Clean Architecture, separating domain, use cases, HTTP adapters and infrastructure for maintainability and testability.
  • External API with API Keys, scopes and per-organization rate limiting, enabling secure, auditable integrations on a per-project basis.
  • Asynchronous job processing for email summaries, reconciliations and scheduled financial routines, improving perceived performance and reliability.
  • React SPA frontend with drag-and-drop dashboard widgets, tailored for high-frequency daily financial operations across multiple organizations.
  • State management with Zustand and client-side caching to minimize redundant network calls and keep complex data-heavy screens responsive.
  • Responsive UI built with TailwindCSS + Radix UI, providing accessible, consistent building blocks for the main financial workflows.
  • Centralized validation using Zod, sharing schemas across boundaries and reducing runtime errors due to invalid payloads.
  • Strong DX focus: setup scripts, seeds and fixtures to spin up realistic development environments in a few commands, supporting experimentation and debugging.
  • Data model and APIs designed for per-project financial traceability, with structured cash-flow, category and origin-based reports that don’t mix tenant data.

Gallery