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.

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.

More challenges to enter

Prizes are offered and awarded by TechShrine InfoSolutions, not by Wooble. Amounts shown are as stated by the host and may include the host’s own valuation of non-cash items. Who places, how and when a prize is paid, and any tax or deduction, are between the winner and the host. A challenge may close, change or be withdrawn before results are declared.