Paginated Data List

This project is a small React application where the goal is to fetch a large dataset from an external API, display it in a paginated list, and validate the solution with a complete testing setup (unit, integration and end-to-end).

The focus of the implementation is clarity, separation of concerns and testability, rather than visual complexity.

---

What the application does

• Fetches user data from a public API
• Displays the following information for each user:
  • Full name
  • Job title
  • Address
• Paginates the data on the client side (20 items per page)
• Allows navigation using Previous / Next controls
• Handles loading and error states

---

Technical approach

• Data fetching is isolated in a service and exposed through a custom hook
• Pagination logic is implemented as a pure function
• A generic DataList component is responsible only for rendering and pagination UI
• The container component (Home) handles data formatting and composition

This keeps business logic, UI logic and side effects clearly separated.

---

Testing strategy

The project includes the full testing spectrum:

Unit tests

• Pagination logic is tested in isolation
• Focused on deterministic, fast tests

Integration tests

• Validate the interaction between:
  • API layer
  • Custom hooks
  • Container components
• External API calls are mocked using MSW (Node) to keep tests stable and predictable

End-to-End tests

• Implemented with Playwright
• Run against the built application in a real browser
• Validate the critical user flow:
  • Application loads
  • Data is rendered
  • Pagination works as expected

Since the API is public and external, E2E tests focus on user behavior rather than backend availability.

---

Configuration

The API endpoint is configured through an environment variable to avoid hardcoding external dependencies.

Example:

VITE_USERS_API_URL=https://dummyjson.com/c/51f7-b5cd-49f0-88ad