Cruise Explorer / Web
Making a list of sailings easier to explore.
A responsive cruise-search frontend with six sorting options, pagination, and itinerary cards powered by a sandbox API.
- My role
- Frontend development
- When
- 2026
- Built with
- Next.js · React · TypeScript · Tailwind CSS
Explore how it works
Try it yourself ↓The same sailings, a different comparison.
Try all six sort orders and page through an invented set of itineraries.
- Tide480 units
Port B → Port D · 3 nights · 2027-05-08
- Harbor620 units
Port A → Port B · 4 nights · 2027-04-12
- Coast760 units
Port D → Port A · 5 nights · 2027-05-01
Sample itineraries illustrate the client-side sorting and pagination. These are not bookable sailings or live prices; the sandbox API is not called.
The challenge
A useful travel listing needs to make price, departure date, duration, and itinerary easy to compare. I built an interface around those decisions using sailing data from the Cruisebound sandbox API.
How I built it
Fetch the initial results on the server
A Next.js page requests sailing results from the sandbox endpoint and passes them into the search interface.
Support different ways to compare
Six client-side sort orders and ten-result pagination help visitors explore the available sailings by price, date, and duration.
Give each itinerary a readable shape
Responsive cards bring together ship imagery, itinerary dates, ratings, and prices so key details can be scanned together.
What came out of it
A focused frontend implementation for cruise discovery. At the October 2026 review, the deployed page's upstream API was unavailable and the page displayed its fetch-error state; the source remains available to explore.