The Prompt
Create a property listings page with interactive map and list views.
Layout: Split view with map + listings, toggle between Map/List views
- Header: View toggle (Map/List), filter bar (price, bedrooms, property type)
- Map view: Interactive MapLibre map with property markers, popup on click
- List view: Grid of property cards with image, price, details
- Sidebar/cards: Property info, favorite button, quick stats
Include:
- 8-10 sample properties with varied prices, locations, images
- Filter controls that work across both views
- Map markers with price labels, cluster on zoom out
- Hover/click interactions between map and list
Style: Clean real-estate feel. Blue accents for interactive elements. Use MapLibre GL with free OpenStreetMap tiles.
Uses react-map-gl with MapLibre GL — no API key required
Property Listings
12 properties in Auckland