Overview

A take-home assessment for a Senior Frontend role. The brief was an internal product management dashboard with inline editing, status filters, and a responsive data grid. I used it as a chance to demonstrate clean UI and the kind of performance techniques I reach for on real production apps.

Highlights

• Clean, dark-themed UI: a minimal dashboard layout with clear hierarchy, predictable controls, and keyboard-friendly interactions.
• TanStack Query (React Query): caching, background revalidation, and optimistic updates for a snappy feel without overfetching.
• List virtualization: only the visible rows render, keeping the grid smooth even with large product lists and many variants per item.
• Composable table: filters (All / Published / Low Stock / Draft), pagination, and column-level actions built on a reusable table primitive.

Technologies

• Framework: Next.js (App Router), React, TypeScript
• Data fetching: TanStack Query
• Virtualization: TanStack Virtual
• Styling: utility-first CSS with a dark theme

Takeaways

Even at an assessment scale, investing in the right primitives — a virtualized table, a tight query layer, and a small set of well-named components — paid off quickly. Most of the "polish" work (optimistic updates, skeleton states, empty states) came almost for free once the foundations were in place.