Scenario

You are tasked with building a web page that displays a paginated list of items, such as posts, products, or users. Users must be able to navigate through this list using pagination controls.

Requirements

Frontend UI

• Display the list of items for the current page.
• Provide pagination controls including "Next" and "Previous" buttons, a current page indicator, and optionally, page numbers.
• Handle various UI states such as loading data and displaying an empty list.

Backend API

• Design an API endpoint to fetch a single page of results.
• Ensure stable ordering of items, for example, by created_at timestamp in descending order, with id as a tie-breaker.
• Include necessary metadata in the API response for the UI, such as an indication of whether there is a next page available, and optionally, the total count of items.

Data Model

• Propose a minimal data model for the entity being listed.
• Describe the database indexing required to support efficient pagination queries.

Corner Cases

Consider and address the following scenarios:

• Items being inserted or deleted from the dataset while a user is actively navigating through pages.
• Handling very large datasets where scanning all rows is not feasible.
• Gracefully managing requests for out-of-range pages or when no results are found.
• The user changing sort or filter criteria while already paging through results.

Deliverables

• A high-level architecture diagram illustrating the interaction between the frontend, API, and database.
• A detailed design for the API's request and response structure.
• The proposed data model along with necessary database indexes.
• A discussion of key architectural tradeoffs, specifically comparing offset-based versus cursor-based pagination strategies.