FinOps dashboard, Figma to Next.js, 12 days.

Series-A FinOps startup. 42-component Figma file, 6 dashboard routes, Recharts integration against their existing REST API. Shipped in 12 working days at from $6,490. Delivered as a Next.js 15 App Router project on Vercel. Lighthouse 98 / 100 / 100 / 100.

See portfolio

Screenshot of the delivered FinOps dashboard with recharts area graph and side navigation.

Dev-to-dev.

The Figma was disciplined: auto-layout on every frame, variables for color + spacing, component variants for state. That let us run Locofy Pro on the marketing surface and keep about 65 percent of its output. The dashboard shell (side nav, breadcrumb, data grid) was hand-coded because the state model was non-trivial.

Metrics on delivery.

Lighthouse: Performance 98, Accessibility 100, Best Practices 100, SEO 100.
Core Web Vitals: LCP 1.2s, INP 84ms, CLS 0.02.
Bundle: 112 KB first-load JS on the dashboard route (with Recharts code-split).
42 components shipped, 6 routes, TypeScript strict.
Zero any types in the delivered source.
14-day fix window used for 2 minor tweaks (empty-state copy, chart tooltip alignment). Both under the SLA.

Server-fetched, client-rendered chart. Real code, real page.

// app/(dashboard)/spend/page.tsx  (server component fetching FinOps data)
import { SpendChart } from '@/components/SpendChart'
import { getSpendByMonth } from '@/lib/api'

export default async function SpendPage() {
  const spend = await getSpendByMonth() // typed against their OpenAPI schema

  return (
    <section aria-labelledby="spend-title">
      <h1 id="spend-title" className="text-2xl font-bold">Monthly spend</h1>
      <SpendChart data={spend} /> {/* client component, code-split */}
    </section>
  )
}

Tool used: Locofy Pro on the 4 marketing routes (65% kept, semantic + Next.js metadata rewritten). Manual on the 2 dashboard routes.

What broke.

Locofy stamped 'use client' on every file including the layout. Client had to be pruned from 38 files back to 6.
Recharts SSR is fiddly. We wrapped the chart in a client-only boundary and added a skeleton for the first paint.
Their REST API returned Date strings, not ISO. We wrote a Zod parser at the fetch boundary so the rest of the app sees typed Date objects.

Related.

# get a quote

Send a Figma. We'll quote in 24 hours.

Paste a share link. Add a line about the output stack (React, HTML, WordPress). We'll reply with an indicative price and a start date.