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!