Frontend Interview: User Directory

Welcome! You'll be working on a User Directory application built with Next.js, React, and TypeScript.

Getting Started

npm install
npm run dev

Open http://localhost:3000 to see the application.

The Goal

This is a user directory that allows browsing company employees. The intended features are:

• Search by name, email, or title
• Filter by department and status
• Navigate through pages of results
• Mark users as favorites

Your Task

The application is incomplete. Your goal is to get it to a working, polished state.

Things to be aware of:

• Nothing is styled yet
• There may be bugs
• There may be performance issues
• Some features aren't implemented

Prioritize however you see fit. We're interested in how you approach the problem as much as the solution itself.

Project Structure

src/
├── components/      # React components
├── context/         # React context providers
├── hooks/           # Custom hooks
├── pages/           # Next.js pages + API routes
├── data/            # Mock data
├── styles/          # CSS files
└── types/           # TypeScript types

Styling

Use whichever approach you're comfortable with:

• Tailwind CSS - utility classes are available
• Regular CSS - src/styles/components.css has some starter classes

Notes

• The API has a slight delay to simulate real network conditions
• There are 150 users in the database
• Feel free to ask questions as you work

Time

You have approximately 1 hour. It's okay if you don't finish everything.

Good luck!