Skip to content

INTERVIEW_SPEC.md

Latest commit

 

History

History
60 lines (49 loc) · 3.24 KB

INTERVIEW_SPEC.md

File metadata and controls

60 lines (49 loc) · 3.24 KB

Wise Depot Manager: Interview Kit Specification

1. Project Context

Company: Wise (Logistics software in Solihull) Role: Senior/Staff Frontend Engineer Goal: A 45-minute coding assessment focused on state management, performance, and Next.js 15+ architectural patterns. Candidates will be asked to fetch data from a Next.js route endpoint and display the results as a list on the Depot Manager dashboard. Next, candidates should wire up the search input so that users are able to search through the list of depots. Finally, candidates will need to ensure that recent searches are displayed near to the search input field. Task: Rewrite the application to support the following requirements, ensuring that candidates have a useful baseline from which to develop their solution.

2. Technical Architecture

Data Layer (Next.js Route Handler)

  • Location: src/app/api/depots/route.ts
  • Mock Data: An array of 10 depots. Fields: id (string), name (e.g., "Solihull Distribution Hub"), location (e.g., "B90 4SS"), capacity (0-100).
  • Behavior: Wrap the response in a 500ms delay to simulate network latency.

State Management (Zustand)

  • Location: src/store/useDepot.ts
  • Features: - Use persist middleware for recentSearches.
    • Initial state: depots: [], isLoading: false, recentSearches: [].
  • Skeleton: Provide fetchDepots and addSearchTerm as empty functions with // TODO comments for the candidate.
  • Trap: Do NOT handle hydration mismatches in the boilerplate; the candidate must identify and solve this.

Component Library

  • Location: src/components/depot-manager/
  • Components:
    1. DepotCard.tsx: Display name, location, and a Tailwind-styled capacity progress bar.
    2. SearchBar.tsx: A search input field.
    3. SearchHistory.tsx: A list of clickable "pills" for recent search terms.

3. The Interview Page

  • Location: src/app/depots/page.tsx
  • Requirements: - Render a professional dashboard layout using the components above.
    • The page must be "dead" (UI only).
    • Use // TODO comments to mark where the candidate should:
      1. Fetch data on mount.
      2. Wire up the search input to the store.
      3. Implement the filter logic for the list.

4. Documentation

  • Generate a README-INTERVIEW.md in the root explaining the task to the candidate, emphasizing the 45-minute limit and the need for a Senior-level solution which considers hydration, performance, and edge cases.

Senior-Level Expectations

As a Senior/Staff Frontend Engineer, we expect you to consider:

Hydration Handling

  • The Zustand store uses persist middleware which can cause hydration mismatches in Next.js
  • You must identify and solve this issue - it's intentionally left for you to handle
  • Consider using skipHydration or manual rehydration strategies

Performance

  • Optimize re-renders where possible
  • Consider memoization for filtered lists
  • Ensure the search doesn't cause unnecessary API calls
  • Think about debouncing search input if appropriate

Edge Cases

  • Handle empty search results gracefully
  • Manage loading and error states
  • Consider what happens if the API fails
  • Handle edge cases in search history (empty strings, duplicates, etc.)