Technical Interview Starter

A minimal Next.js + React starter for live coding exercises.

Repo: https://github.com/aintnorest/technical-interview-example

AI assistants (Cursor, Copilot, ChatGPT, etc.) are allowed. You are responsible for what you ship — read, run, and adjust generated code.

This exercise is delivered in phases during the interview. Complete each phase before moving on. Additional requirements will be given verbally by the interviewer. We will get as far as we get. That is not a race there is no requirement to complete all phases in fact the intention is to have more than you could complete in a single session. The goal is to see how you work and think.

Prerequisites

• Node.js 20+
• npm

Setup

git clone https://github.com/aintnorest/technical-interview-example.git
cd technical-interview-example
npm install
npm run dev

Open http://localhost:3000 and confirm the starter shell loads. The page renders ProductSearch from src/app/page.jsx.

What already exists

Path	Status
src/data/products.js	Seed catalog (~96 items)
src/lib/productCatalog.js → fetchProducts()	Implemented (simulated async load)
src/lib/productCatalog.js → getCategories()	Implemented
src/lib/productCatalog.js → filterProducts()	Stub — returns all products unchanged
src/lib/productCatalog.test.js	Passing tests; describe.skip("filterProducts", …) block for Phase 4
src/hooks/useProductCatalog.js → useProductCatalog()	Stub — you implement
src/components/ProductSearch.jsx → ProductSearch	Stub — you implement

Phase 1 — Catalog load and list

Build a product catalog browser over ~96 items from src/data/products.js. Each product has id, name, category, price, inStock, and sku.

You implement

• src/hooks/useProductCatalog.js — call fetchProducts() from src/lib/productCatalog.js, expose catalog state to the UI
• src/components/ProductSearch.jsx — render the product list

Data access

• Load catalog data through fetchProducts() in src/lib/productCatalog.js (simulated delay — no real network).
• src/components/ProductSearch.jsx must consume useProductCatalog() from src/hooks/useProductCatalog.js.
• Do not import src/data/products.js (or @/data/products) in src/components/ProductSearch.jsx.

Phase 1 requirements

1. Show a loading state while fetchProducts() in src/lib/productCatalog.js resolves.
2. Show an error message if fetchProducts() rejects (pass { simulateError: true } to test).
3. Render the full list with name, category, price, and stock status for each product.

Wait for Phase 2 before adding search or filters.

Quality checks

npm run lint
npm test
npm run build

Project layout

src/
  app/page.jsx                          # mounts ProductSearch
  components/ProductSearch.jsx          # you implement (UI)
  data/products.js                      # seed data (do not import from component)
  hooks/useProductCatalog.js            # you implement (catalog state)
  lib/productCatalog.js                 # fetchProducts, getCategories, filterProducts stub
  lib/productCatalog.test.js            # tests; filterProducts block skipped until Phase 4