Next.js Dashboard & Data Fetching Optimization

Build a responsive analytics dashboard with optimized server-side rendering.

Hiring screen · Open

Candidates will build a small Next.js application that fetches, filters, and visualizes data efficiently using TypeScript.

What you can win

Also included

Expert review
Your work is reviewed by experienced practitioners.

The brief

TechShrine requires a high-performance analytics dashboard component. Using Next.js (App Router) and TypeScript, build a page that fetches mock data from an API, implements client-side search and filtering with debouncing, and presents the metrics using accessible UI components styled with Tailwind CSS.

Deliverables

A public GitHub repository containing the Next.js project code.
A README file detailing setup instructions, architecture decisions, and performance optimizations made.
Deployed preview link (e.g., Vercel).

Evaluation criteria

Code quality, organization, and TypeScript type safety.
Correct implementation of Next.js data fetching strategies.
UI responsiveness and adherence to modern UX standards.
Performance optimizations such as debouncing and memoization.