Meridian
A production-grade CRM analytics dashboard built with Next.js 16, Tailwind CSS and shadcn/ui — designed from the ground up in Figma with a cohesive dark UI, design tokens, and a component system built to scale.
Meridian is a CRM analytics dashboard built as a full end-to-end project — from Figma design system to production Next.js app. The goal was to demonstrate what a well-structured, design-token-driven product looks like when design and engineering speak the same language.
The dashboard includes KPI metric cards, a lead sources donut chart, a revenue flow bar chart, and a searchable active deals table — all wired to typed mock API routes under Next.js App Router, making it easy to swap in a real backend without touching the UI layer.
On the design side, everything starts in Figma — spacing, color, typography, and component variants are all defined as tokens first. On the engineering side, those decisions translate directly into Tailwind v4 config and shadcn/ui primitives, keeping the design-to-code handoff tight and intentional.
Next.js 16, React 19, TypeScript, Tailwind CSS, shadcn/ui, TanStack Query, Recharts, Vitest