Skip to main content
YK logo
← Back to projects

Ops Tooling Dashboard

Internal full-stack operations platform for loyalty rewards and offer management

Ops Tooling Dashboard — internal operations platform

Case Study: Ops Tooling Dashboard

Overview

Type: Internal Full-Stack Operations Platform Stack: Next.js · TypeScript · React Query · Material UI · AG Grid · TypeORM · AWS Redshift

A full-stack internal operations dashboard giving teams real-time visibility into rewards, offers, transactions, merchant locations, and card account activity. Before this, that data was fragmented across multiple systems with no unified interface.

Problem

Operations teams worked across disconnected tools to manage and monitor loyalty rewards and offer programmes. No unified interface existed for filtering, auditing, or acting on transactional data — investigations, configuration changes, and partner-level decisions all moved slower as a result.

Role

Senior Frontend Engineer — end-to-end ownership of the client architecture, component system, data-fetching layer, and API route design within a full-stack Next.js codebase.

Technical approach

Meta-framework and rendering

The platform runs on Next.js 14 with the App Router, using file-system routing and co-located API routes from a single deployment. The (main) route group encapsulates all protected pages (offers, rewards, configuration, transactions, user-activity), with routing and access control in one place.

Server-rendered API routes handle data access. Credentials and database connections stay server-side; the client gets clean JSON.

TypeScript and type safety

The entire codebase uses TypeScript with strict mode. Domain models — rewards, offers, transactions, merchants, card accounts — are defined as explicit interfaces shared across client and server. Client and API contracts stay in sync, which cuts out a whole category of integration bug.

State management and data fetching

Client state runs through TanStack React Query v5, treating the server as the source of truth. A thin custom-hook layer (useGetData, usePostData, usePutData, usePatchData) wraps an Axios instance for consistent loading, error, and cache behaviour across features. Query keys live in a constants file, so cache invalidation is explicit and traceable.

Redux-style global stores would've been the wrong call here. Most state on an ops dashboard is server-derived, and React Query handles that without the overhead.

Component architecture and design system

UI components are organised by feature domain under src/app/ui/, with 39+ directories. Material UI v6 (dark-themed) is the base component library. NextUI handles high-interactivity components — modals, pagination, selects — where its headless flexibility is useful.

AG Grid and AG Charts handle data tables and visualisations. Rolling custom tables wasn't worth it given the filtering, sorting, and pagination requirements at operational scale.

Tailwind CSS handles layout-level utility styling, outside the MUI theme override chain.

Forms and validation

Form state uses Formik, with Yup schemas in src/app/schemas/. Schemas are co-located with their domain context rather than scattered inline — reusable and independently testable.

Authentication and security

NextAuth v4 handles session management with JWT verification. A Next.js middleware (src/middleware.ts) intercepts all requests to protected routes, validates the token, and redirects unauthenticated requests to /signin before they reach any application logic.

AWS JWT verification handles service-to-service auth. AWS SSM manages secrets, keeping credentials out of environment variables.

Backend and data layer

API routes use TypeORM with entity definitions in src/entities/ for relational database access. A separate AWS Redshift integration (src/redshift.ts) handles analytical queries against the data warehouse. Transactional and analytical access patterns are intentionally separated — the query shapes are different enough that mixing them would have been a mistake.

Tooling and code quality

  • ESLint with custom rules: no relative imports (all paths use @/ aliases), alphabetised imports, no unused imports
  • Prettier for formatting
  • Jest and Testing Library for unit and integration tests
  • Playwright for end-to-end coverage
  • Pino for structured server-side logging

Module bundling and build

Turbopack/SWC for local development. Production builds use standalone output for containerised deployment.

Key features

  • Offers management — create, view, filter, and configure offer records with full audit trails
  • Rewards dashboard — real-time data with filtering across partner, status, and date
  • Transaction monitoring — paginated, sortable tables with multi-field search
  • Configuration panel — operator-controlled settings for publishers and providers
  • User activity tracking — card account and user-level activity visibility
  • Role-based access — permission-aware UI driven by auth context

Tech stack

Concern Technology
Meta-framework Next.js 14 (App Router)
Language TypeScript (strict)
Styling Material UI v6, Tailwind CSS, NextUI
Data fetching TanStack React Query v5, Axios
Data tables AG Grid, AG Charts
Forms Formik, Yup
Auth NextAuth v4, AWS JWT Verify
ORM TypeORM
Data warehouse AWS Redshift
Secrets AWS SSM
Testing Jest, Testing Library, Playwright
Linting ESLint, Prettier
Logging Pino