Professional Project

Hero Dashboard

Enterprise admin dashboard powering Clube Certo's internal operations with 432+ components across 42 feature modules.

Clube Certo
2025 — Present
Vue 3 / TypeScript
View Live Site

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

Want to see more of my work?

All Projects