Hero Dashboard — James Strohm

Overview

Hero is the central admin dashboard for Clube Certo's loyalty SaaS platform. It serves as the operational hub where internal teams manage associates, companies, billing, leads, and financial reporting. I built this from the ground up as the sole front-end architect, designing the component library, routing system, and data fetching patterns.

By The Numbers

432+

Components

42

Modules

1,100+

Lines (AutoForm)

850+

Lines (DataTable)

Key Features

Dynamic AutoForm Generator

1,100-line form engine supporting 16+ field types with validation, conditional rendering, and schema-driven configuration.

Enterprise DataTable

850-line data table with pagination, multi-column sorting, sticky headers, global filtering, and row selection.

Role-Based Access

Permission-gated routing and UI elements. Each user role sees only the modules and actions they're authorized for.

Financial Dashboards

Real-time charts and KPI cards for revenue tracking, billing status, and collection performance metrics.

Modular Architecture

Feature-driven folder structure with isolated routing per module. Each domain (billing, leads, associates) is self-contained.

Dark Mode

Full dark/light mode support using CSS custom properties with system preference detection and manual toggle.

Challenges & Solutions

Form Complexity: Dozens of different forms across modules led to massive duplication. Solved by building a schema-driven AutoForm that generates any form from a JSON config.
Performance at Scale: 432+ components required aggressive code splitting. Implemented lazy-loaded route modules and TanStack Query for smart caching/deduplication.
Consistency: With 42 modules, UI drift was a real risk. Built on shadcn-vue primitives with strict design tokens to keep every module visually consistent.
State Management: Complex cross-module data dependencies. Used composable-based state with TanStack Query's cache as the single source of truth for server state.

Tech Stack

Vue 3 TypeScript TanStack Query Tailwind CSS shadcn-vue Vite Vue Router Pinia