Fintech Analytics Dashboard for Investment Platform

The Challenge

ClearVest Capital operated a decade-old internal reporting tool built on a legacy PHP stack. Portfolio managers were waiting up to 45 minutes to generate client performance reports — a bottleneck that was costing the firm client trust and analyst productivity.

The existing system had three core problems:

1. Unoptimised database queries — every report triggered full table scans across millions of transaction rows
2. Synchronous rendering — the UI blocked completely during report generation with no progress feedback
3. No mobile access — analysts in client meetings had no way to pull live data on their devices

The brief was clear: rebuild the platform from the ground up, preserve the existing data model, and ship within 12 weeks.

Our Approach

Discovery & Architecture (Weeks 1–2)

We began with a two-week discovery sprint covering:

• Database query profiling with PostgreSQL EXPLAIN ANALYZE
• User interviews with six portfolio managers and two compliance analysts
• Competitor benchmarking against Bloomberg Terminal and Morningstar Direct

The key insight from interviews: users didn't need all data simultaneously — they needed the right data, instantly. This shaped our entire technical architecture.

Database Optimisation (Weeks 3–4)

Before touching the frontend, we optimised the data layer:

• Added composite indexes on (client_id, date_range, asset_class) — the most common query pattern
• Introduced materialized views for commonly run aggregations, refreshed nightly and on-demand
• Migrated from raw SQL to Prisma ORM with type-safe query builders

Result: the most complex report query dropped from 42 seconds to 180 milliseconds.

Application Layer (Weeks 5–9)

The new stack:

• Next.js 14 App Router with React Server Components for the data-heavy reporting views
• Server Actions for form submissions — eliminating a separate API layer
• Zustand for client-side dashboard state (filters, date ranges, selected portfolios)
• Recharts for data visualisation — chosen for its accessibility support and bundle efficiency

We implemented optimistic UI patterns so users see skeleton states and progressive data loading — the dashboard feels instant even when fetching large datasets.

Security Review (Week 10)

Given the financial data sensitivity, we ran a dedicated security sprint:

• Row-level security policies in PostgreSQL restricting analyst access to their assigned portfolios
• CSP headers blocking all third-party script injection
• Dependency audit with Snyk — 0 critical CVEs on launch
• Full audit logging of all data access events

QA & Launch (Weeks 11–12)

• 312 Jest unit and integration tests — 94% branch coverage
• Playwright E2E suite covering 18 critical user journeys
• Lighthouse audit: Performance 94 / Accessibility 97 / SEO 92
• Phased rollout starting with three pilot users before full firm deployment

Results

The platform launched on schedule after 12 weeks. Within the first month:

• Report generation time fell from an average of 45 minutes to under 3 seconds
• User session length increased by 68% — analysts were spending more time using the platform
• Support ticket volume dropped by 54% — the new UI was significantly more intuitive
• Zero unplanned downtime in the first 60 days post-launch

The compliance team specifically noted that the new audit logging feature — which wasn't in the original brief — became one of their most used tools.

Technical Stack

| Layer | Technology | |-------|-----------| | Frontend | Next.js 14, React, TypeScript | | Styling | Tailwind CSS | | State | Zustand | | Charts | Recharts | | Backend | Next.js API Routes, Server Actions | | Database | PostgreSQL, Prisma ORM | | Auth | NextAuth.js | | Testing | Jest, Playwright | | Hosting | Vercel (frontend), Supabase (database) |

Start a similar project →