Frontend Technical Assessment

Overview

This assessment tests your frontend development skills by asking you to build a paginated user management interface. You'll be working with a React application that displays user information in a grid layout.

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open your browser to the URL shown in the terminal (typically http://localhost:5173)

Requirements

Your task is to transform the static user interface into a dynamic, paginated application that fetches data from a REST API.

Core Requirements

1. Fetch Users from API

   • Replace the static data with real data from: https://686576ee5b5d8d0339813bd7.mockapi.io/api/v1/users
   • The API returns an array of user objects

2. Fetch Tasks for Each User

   • Each user has associated tasks available at: https://686576ee5b5d8d0339813bd7.mockapi.io/api/v1/users/{userId}/task
   • Display the task name for each user
   • If a user has no tasks, display "No task assigned"

3. Implement Pagination

   • Use URL query parameters to manage pagination (e.g., ?page=1&pageSize=6)
   • Previous/Next buttons should update the page number
   • Page size selector should update the number of items displayed
   • Disable Previous button on first page and Next button on last page

4. Maintain the Visual Design

   • Keep the 2 rows × 3 columns grid layout (when pageSize is 6)
   • Display user avatar in a circle
   • Show user name and title below the avatar
   • Show task assignment at the bottom of each card

Additional Considerations

While the core requirements above are the minimum expectations, we encourage you to demonstrate your expertise by considering:

• Error Handling: How do you handle API failures or network issues?
• Loading States: How do you communicate to users that data is being fetched?
• Performance: Are there opportunities to optimize API calls or rendering?
• Code Organization: How do you structure your components and logic?
• TypeScript: The project supports TypeScript if you choose to use it
• Testing: How would you ensure your solution works correctly?
• Accessibility: Is your solution usable by everyone?
• User Experience: Are there ways to improve the interaction design?

Available Scripts

• npm run dev - Start the development server
• npm run build - Build for production
• npm run preview - Preview the production build

Notes

• You may install additional packages if needed
• You may reorganize the code structure as you see fit
• Focus on writing clean, maintainable code
• Consider edge cases in your implementation

Time Expectation

This assessment is designed to be completed in approximately 45-60 minutes. Focus on delivering a working solution first, then enhance as time permits.

Good luck!