Rudratek Dashboard

Rudratek Dashboard started as an interview deliverable. The v2 overhaul went from generic admin look to a real product: Next.js 14 + TypeScript + Tailwind, hand-rolled SVG visualisations (sparkline, status donut, weekday heatmap, fairness bar, progress bar — all under 60 LOC each, zero chart-lib deps), an analytics page with revenue trend + top-clients ranking + priority distribution, and a drillable side panel with milestones timeline, task checklist, team grid, project sparkline.

Source on GitHub

Mock Projects

Viz Primitives

Chart Libs

Web App

What Wasn't Working

The v1 interview deliverable shipped working but felt generic — 3 flat stat cards on a project table, no charts, no progress bars, no team avatars. Plus a font bug: globals.css had a stray `font-family: Arial` overriding the next/font Inter import.

The Solution

How I Fixed It

v2 fixed the font bug, switched to an indigo→violet accent system applied across nav + focus rings + KPI icons + sparklines, expanded the Project type from 7 fields to 14 (added team, milestones, tasks, tags, revenueTrend), built 5 hand-rolled SVG viz primitives in ~250 LOC total, added a new /analytics page.

Stack

Technologies Used

Next.js 14

TypeScript

Tailwind v4

Lucide

Framer Motion

Results

Key Outcomes

✓

Zero chart libraries — every visualisation hand-rolled SVG

✓

Project type expanded 7 → 14 fields with realistic mock data

✓

New /analytics page with burn-rate / at-risk-project KPIs

✓

CI workflow gates typecheck + lint + build on every push

Want something like this?

Let's build it. I ship fast and I ship clean.

View Code Hire Me