Drills

Coding problemMedium~25 min

Render capability-aware UI without trusting it

Uses server-resolved capabilities for presentation while keeping the mutation endpoint authoritative.

Coding problemEasy~15 min

Render complete data-page states

Uses an explicit state model for initial loading, success, empty, recoverable error, and refetching.

Server vs client components in Next.js

Explains Next.js server/client component boundaries, interactivity, data access, serialization, and bundle impact.

Coding problemMedium~25 min

Split a Next.js page at the interaction boundary

Keeps data and secrets on the server while sending a small serializable model to an interactive client component.

SSR vs CSR vs static rendering in Next.js

Explains server rendering, client rendering, static rendering, freshness, SEO, personalization, and performance trade-offs.

State updates, batching, and functional setters

Explains asynchronous-looking state updates, batching, functional setters, and avoiding stale values.

ReactTypeScript

Coding problemMedium~25 min

Synchronize filters and pagination with the URL

Makes list filters shareable and back-button friendly while resetting pagination deliberately.

Coding problemEasy~15 min

Test a component through user behavior

Tests validation, focus, pending state, and the save contract through accessible user interactions rather than component internals.

Coding problemHard~35 min

Test a critical user flow with Playwright

Tests one browser-to-database practice workflow with isolated fixtures, resilient locators, durable assertions, and reliable cleanup.

Next.jsPlaywrightReactTypeScript

Next.jsPlaywrightReactTypeScript

Test React components through user behavior

Explains component tests that assert user-visible behavior instead of implementation details.

Concept questionHard~9 min

Trace full-stack user actions in production

Explains tracing one user action across browser, frontend server, API, dependencies, logs, metrics, and safe diagnostics.

.NETASP.NET CoreNext.jsReactTypeScript

Concept questionHard~9 min

Use a Next.js backend-for-frontend with an ASP.NET API

Explains when a Next.js route layer helps with cookies, tokens, aggregation, and UI-specific API adaptation.

.NETASP.NET CoreNext.jsReactTypeScript

Comparison questionMedium~7 min

Use a reducer for explicit React state transitions

Explains when a reducer clarifies related state transitions and when independent state remains simpler.

ReactTypeScript

ASP.NET CoreNext.jsReactTypeScript

Use Next.js route handlers as an API boundary

Explains route handlers as a frontend server boundary for cookies, API adaptation, auth, and backend calls.

Architecture scenarioHard~12 min

Use Suspense and streaming boundaries in Next.js

Explains how Suspense boundaries stream useful page regions while coordinating loading, errors, and data ownership.

.NETASP.NET CoreNext.jsPlaywrightReact+1

Write an end-to-end test for a critical flow

Explains how to choose an E2E flow, control test data, avoid brittleness, and cover frontend/API integration risk.