Arinit
Skip to content
Arinit

FinTech SaaS

SaaS Dashboard Rebuild

Replaced a legacy Django frontend with a modern Next.js app. LCP dropped from 4.2s to 0.9s, conversion climbed 23%.

webReactNext.jsTypeScriptPostgreSQLAWS
0s
LCP achieved (Down from 4.2s)
+23%
Conversion uplift (Trial to paid)
0 weeks
Delivery time (Including QA)
-60%
Maintenance load (Sprint time freed)

The challenge

The client's analytics dashboard was built as a Django monolith during their MVP phase. As they scaled to 2,000+ active users, the cracks started showing: page loads hit 4.2 seconds, the frontend couldn't support real-time data updates, and their engineering team spent 40% of sprint time on maintenance instead of shipping features.

They needed a modern frontend without disrupting their existing API layer — and critically, without any downtime for their paying customers.

Our approach

We ran a 2-week discovery phase to map every dashboard view, API dependency, and user workflow. Rather than a big-bang rewrite, we designed a strangler-fig migration: a new Next.js frontend consuming the existing Django REST API, page by page.

We set a strict performance budget — LCP under 1.2s, CLS under 0.1 — enforced in CI on every pull request. Feature flags allowed us to roll out the new frontend incrementally: 10%, 25%, 50%, 100% of traffic, with real-time error monitoring at each stage.

Key technical decisions:

  • Next.js App Router for streaming SSR and granular caching
  • TanStack Query for server state management with optimistic updates
  • Chose NOT to rebuild the API — the Django backend was solid, the frontend was the bottleneck

What we built

A complete frontend rebuild that maintained API compatibility while dramatically improving performance and developer experience. The new system included:

  • Real-time dashboard updates via WebSocket integration
  • Responsive design supporting desktop and tablet workflows
  • Automated performance regression testing in CI
  • Feature flag system for safe incremental rollout
  • Comprehensive monitoring and alerting via Datadog

Technology stack

Frontend

ReactNext.js 14TypeScriptTanStack QueryTailwind CSS

Backend

Django REST API (existing)PostgreSQL

Infrastructure

AWS ECSCloudFrontRDSGitHub Actions

Timeline

Week 1-2

Discovery

Mapped every dashboard view, API dependency, and user workflow.

Week 3

Architecture

Designed strangler-fig migration strategy and performance budgets.

Week 4-9

Build (Sprint 1-3)

Incremental frontend rebuild with feature flags for gradual rollout.

Week 10

Launch

Full traffic cutover with real-time error monitoring.

Key learnings

Strangler-fig was the right call

Gradual rollout let us catch edge cases before full traffic hit the new frontend. We went 10% → 25% → 50% → 100% over two weeks.

Performance budgets in CI caught regressions

Lighthouse CI gates caught three regressions that would have shipped otherwise. Automated quality gates paid for themselves immediately.

Start a conversation about your project.