Interview Test - Virtual User List Demo

This project showcases a user list application with various performance challenges intentionally embedded for candidates to identify and optimize. It features two main components: a regular User Card and a VIP Card, both retrieving mock data through API routes.

Purpose

This is an interview assessment designed to evaluate a candidate's ability to:

• Identify performance bottlenecks in React applications
• Recognize and fix anti-patterns in code
• Implement optimization techniques for handling large datasets
• Debug API error handling and loading states
• Improve component architecture and state management

Current Features

• Virtual scrolling implementation using @tanstack/react-virtual for large user lists
• Real-time search filtering functionality
• Simulated API delays and failure scenarios
• Responsive design
• Styling with Tailwind CSS

Technology Stack

• Next.js 15
• React 19
• TypeScript
• Tailwind CSS
• @tanstack/react-virtual - for virtual scrolling
• Faker.js - for generating mock data

Getting Started

Requirements

• Node.js 18.x or higher
• npm, yarn, pnpm, or bun

Installation

# Using npm
npm install

# Or using yarn
yarn

# Or using pnpm
pnpm install

# Or using bun
bun install

Running the Development Server

# Using npm
npm run dev

# Or using yarn
yarn dev

# Or using pnpm
pnpm dev

# Or using bun
bun dev

Open http://localhost:3000 in your browser to see the application.

Project Structure

src/
├── app/                # Next.js App Router
│   ├── _components/    # Page-specific components
│   ├── api/            # API routes
│   └── page.tsx        # Main page
├── components/         # Shared components
└── lib/                # Utility functions and type definitions

API Endpoints

The project includes two API endpoints:

• /api/users - Provides a list of regular users with simulated network delay
• /api/vips - Provides a list of VIP users with simulated occasional request failures

Optimization Opportunities

The project intentionally contains various areas for improvement, including:

• Performance bottlenecks in component rendering
• Inefficient state management
• Suboptimal data fetching strategies
• Inadequate error handling
• Potential memory leaks
• Accessibility issues

Candidates are expected to identify these issues and propose or implement solutions to optimize the application.

Assessment Criteria

Candidates will be evaluated on their ability to:

• Identify the most critical performance issues
• Explain the root causes of the problems
• Propose effective solutions
• Implement improvements while maintaining functionality
• Follow best practices and coding standards

License

MIT