Infinite list implementation.

Scope:

• load data when reached end of list
• data is static - no new items are added (more complex scenario)
• concentrate on data loading (scroll optimization is out of scope)
• open item details on click
• implement 'go back' from item details to list view, (item should be visible on the list)

Solutions:

• using onScroll event: monitor if reached scroll bottom
• using IntersectionObserver: place element at the end of list and observe it, load data when visible

Mocking Data:

• @stoplight/prism-cli
  • pros:
    • forces creating contract using OpenAPI
    • reuse contract to mock data
    • helps to validate contract before backend implementation
  • cons:
    • no control how much data is returned when return array (without hardcoding in mockup)
    • may return duplicated values f.e. items with same id for different query params
    • can't implement paging correctly
    • needs to run server
• json-server for serving data generated by f.e. https://www.mockaroo.com
  • pros:
    • simple and fast solution
    • support basic paging
  • cons:
    • can't use own paging options
    • still cannot implement more complicated scenario
    • needs run server

Development:

pnpm install
pnpm mock-api-json
pnpm dev

Production:

pnpm install
pnpm build
pnpm mock-api-json
pnpm preview