Back to work

Case study · Zustand · APIs ×4

Pathfinder

The challenge

Travel discovery depends on information that is usually spread across separate services: destination details, current conditions, imagery, and related location data. The challenge was to combine four external APIs into one interface that felt cohesive and intentional, rather than presenting visitors with several disconnected data widgets.

The approach

I used Zustand for lightweight shared interface state, including the selected destination and active filters. TanStack Query handled data fetching, caching, loading states, and request management across the four external services. This separated client-side interface state from server-state concerns and kept the data layer manageable as the number of sources increased.

Implementation challenge

Each API could respond at a different speed or fail independently, so the interface could not depend on every request succeeding before it became usable. I designed the application to render available content without blocking the whole experience behind the slowest request, while keeping each data area responsible for its own loading and error state.

What I’d improve

I would define a more consistent fallback system for failed requests from the outset. The current approach handles failure within individual sections, but a shared pattern for empty, loading, and unavailable data states would make the experience more predictable and easier to maintain.

Built with

  • React
  • Zustand
  • TanStack Query
  • Vite
  • External APIs
pathfinder-j.netlify.app/
Screenshot of the Pathfinder website

Static preview shown above. Open the live site to explore the full experience.