Lavida Resort

Overview

Lavida Resort is a hotel website I built with React and Gatsby. Guests can browse available rooms, filter by guest count, room type, and price range, and open a full detail page for each room. Room content is managed in Contentful, which means the hotel can update listings, add new rooms, or change pricing without needing a developer.

Problem

Guests visiting a hotel site have a specific goal: find a room that fits. Too many options with no way to filter makes that harder. The filtering needed to work on mobile, handle combinations (guest count AND price, not just one at a time), and return clear results rather than confusion.

My Role

I built the room listing UI, the filtering system, the CMS-backed room detail pages, the lazy-loaded imagery, and the responsive layout.

Key Features

• •Room filtering with dropdown and range slider inputs for guest count, room type, and price.
• •CMS-managed room listings with a generated detail page per room.
• •Lazy-loaded images across accommodation pages to keep initial load times down.
• •Responsive layout for room browsing on mobile and desktop.

Technical Decisions

• •Contentful and GraphQL for room data so content updates happen in the CMS and the site regenerates automatically.
• •Gatsby routing generates a static detail page per room from CMS entries.
• •Filters are designed around what guests actually decide on: guest count, room type, and price range.
• •Lazy loading defers room images until they scroll into view, which matters given how image-heavy the listing page is.

Challenges Solved

• •Making multiple filter inputs work together and update results in real time without breaking or producing confusing combinations.
• •Room cards needed to stay visually consistent despite rooms having very different image ratios and description lengths.
• •Detail pages needed to surface the most booking-relevant information (capacity, amenities, price) without making guests hunt for it.
• •Keeping filter controls accessible on narrow screens without pushing room results out of view.

Technical Considerations

• •Lazy-loaded images make a real difference to initial load time on a listing page this image-heavy.
• •All filter controls have visible labels and are keyboard operable.
• •Static detail pages mean individual room pages load fast even on slower connections.
• •Room card layout adapts so imagery, key details, and descriptions stay readable at every screen size.

What I Would Improve Next

• •Availability indicators so guests can see at a glance which rooms can actually be booked.
• •Tests for multi-filter combinations to catch cases where filters unexpectedly return no results.
• •Art-directed images for smaller screens, since some room photos are very wide and crop awkwardly on mobile.
• •A proper empty state for when filter combinations return no matching rooms.