Case Study · Listing Website
Sarab PG
Accommodation listings with amenities and enquiry.
- Next.js
- React
- Tailwind CSS
- SEO
What it is
An accommodation website for students: room types, amenities and location details laid out for quick scanning, with a direct enquiry route and SEO-oriented page structure.
The objective
Students comparing accommodation want room type, amenities and price context side by side. The objective was a listing layout that supports comparison instead of forcing separate visits.
How it was solved
A Next.js site where room and amenity data drive listing cards, so every option presents the same fields in the same order and can be compared at a glance.
- Listing content held as data so new rooms need no component changes.
- Shared card component enforcing a consistent field order.
- Static rendering for fast loads on mobile connections.
Key features
Room listings
Room types and amenities rendered from data into comparable cards.
Local search structure
Descriptive metadata and headings for accommodation search intent.
Direct enquiry
A single enquiry action attached to each listing.
Technology
Frontend
- Next.js
- React
- Tailwind CSS
Other
- SEO metadata
Development approach
- Listing content held as data so new rooms need no component changes.
- Shared card component enforcing a consistent field order.
- Static rendering for fast loads on mobile connections.
Interface decisions
- Amenities shown as compact icon-labelled tags for quick scanning.
- Location and contact details repeated where a decision is made.
- No horizontal overflow on narrow devices.
Challenges & solutions
Listings with different amenity counts looked unbalanced.
Cards use equal-height layout with a fixed field order.
