Loading content…
Loading content…
Practice makes permanent. Code minor UI blocks, state patterns, routing middleware, and error boundaries daily to solidify production concepts.
Build a registration form using only semantic HTML5 tags and native constraint validation attributes. The form must require an email, a username (alphanumeric, 4-12 characters), and a password (minimum 8 characters with at least one number).
Build a pricing page grid containing three cards (Starter, Pro, Enterprise) using pure CSS Grid or Flexbox. The layout must stack vertically on mobile screens (< 768px) and display in three columns on desktop viewports.
Given a list of developer profiles containing name, active status, age, and skills, write a JavaScript function that filters out inactive developers, averages the ages of active developers, and returns a sorted list of all active developer skills without duplicates.
Implement an input debouncing function in React and TypeScript. When a user typing in a search bar modifies the query value, delay the remote API fetch operation by 300ms. If they type again before the timeout expires, cancel the pending action.
Write an async fetch utility in TypeScript that loads records from an endpoint. If the HTTP request fails (due to status codes 5xx or network drops), retry the action up to 3 times, adding exponential backoff delays between attempts.
Build a React login form containing email and password inputs using controlled state components. Enforce form validations: show validation errors when leaving the field (onBlur) if entries are invalid.
Write a React custom hook named `useLocalStorage` in TypeScript. It must work like `useState`, persisting the variable's state inside the browser's localStorage and syncing changes across page reloads.
Implement a dynamic product details route in Next.js. The path must accept a slug parameter (`/products/[slug]`), load product details asynchronously, and return a dynamic page title matching the product's title.
Create loading and error boundaries using App Router standards. Design a `loading.tsx` page displaying card skeletons and an `error.tsx` boundary containing retry controls.
Build a GET/POST route handler in Next.js (`/api/feedback/route.ts`). The handler must validate the POST body (requires an email and message), return a 400 Bad Request error if validation fails, and return a 201 Created response on success.
Create an Express authentication middleware that validates JWT tokens. The middleware must inspect the `Authorization` header, parse Bearer tokens, check signatures, append user objects to requests, and block unauthorized traffic with a 401 status code.
Write a Drizzle or Prisma transactional database script that manages a transaction. It must create a new invoice record, verify client balance scopes, deduct costs from users accounts, and write audits logs, rolling back all queries if any step fails.
Create a type-safe file validation function on both client (React forms) and server (Express endpoints). Validate that uploads are exclusively PDFs or PNG images, and restrict maximum file sizes to 5MB.
Refactor a non-accessible interactive component (a div-based toggle switch) to satisfy WCAG AA accessibility standards. The component must support keyboard navigation (Tab to focus, Space/Enter to toggle) and state announcements via ARIA properties.
Implement an image lazy loading and performance auditing component in React. Demonstrate how to defer off-screen images using browser Intersection Observer APIs, rendering low-res placeholders during loading.