Skip to content

README.md

Latest commit

 

History

History
80 lines (55 loc) · 3.2 KB

README.md

File metadata and controls

80 lines (55 loc) · 3.2 KB

Wise Depot Manager - Frontend Interview Assessment

Welcome to the Wise Frontend Engineer coding assessment. This is a 45-minute coding challenge designed to evaluate your skills in state management, performance optimization, and Next.js 15+ architectural patterns.

Overview

You will be working with a Depot Manager dashboard that displays a list of distribution depots. Your task is to implement the core functionality that makes this application fully functional.

What's Already Set Up

The following has been prepared for you:

  • ✅ API route (src/app/api/depots/route.ts) - Returns mock depot data with a 500ms delay
  • ✅ Zustand store (src/store/useDepot.ts) - State management setup with persist middleware
  • ✅ UI Components - All visual components are built and styled:
    • DepotCard - Displays depot information with capacity progress bar
    • SearchBar - Search input field
    • SearchHistory - Recent search terms as clickable pills
  • ✅ Dashboard page (src/app/depots/page.tsx) - Complete UI layout

Your Tasks

You need to implement three core features:

1. Fetch Data on Mount

Wire up the fetchDepots function in the Zustand store to:

  • Set isLoading before/after fetching to display a loading state
  • Call the /api/depots endpoint
  • Update the depots state with the response
  • Handle any errors appropriately

Location: src/store/useDepot.ts - fetchDepots function
Trigger: Call this function in useEffect on the depots page

2. Wire Up Search Input

Connect the search input to the store:

  • Update the search term state as the user types
  • Filter the depots list based on the search term (search by name or location)
  • When a user performs a search (e.g. presses Enter or clicks 'Search'), add the term searched to recentSearches using addRecentSearch

Location: src/app/depots/page.tsx - Search functionality and filtering logic

3. Implement Search History

Complete the addRecentSearch function in the store:

  • Add new search terms to recentSearches
  • Avoid duplicates (if a term already exists, move it to the front)
  • Limit the history to a reasonable number (e.g. 5 recent searches)
  • Ensure clicking a search history pill updates the search input and filters the list

Location: src/store/useDepot.ts - addRecentSearch function

Getting Started

  1. Navigate to /depots to see the dashboard
  2. Review the code structure and understand what's already implemented
  3. Look for // TODO comments in the code - these mark where you need to add functionality
  4. Implement the three tasks above
  5. Test your implementation thoroughly

Technical Stack

  • Next.js 15+ - App Router
  • React 19 - Server and Client Components
  • Zustand 5 - State management with persist middleware
  • TypeScript - Full type safety
  • Tailwind CSS - Styling (dark mode supported)

Time Limit

You have 45 minutes to complete this assessment. During the assessment, you may use the interviewer as a Product Owner to clarify requirements or ask questions. For the solution, you should focus on:

  1. Getting the core functionality working
  2. Handling the hydration issue
  3. Writing clean, maintainable code
  4. Considering performance and edge cases

Good luck!