ILÉ

Overview

ILÉ (Yoruba for “home”) is a concept build for a property agency working in Lagos and Abuja. Most real estate sites are a hero image followed by a grid of cards. This one opens straight on the search: a list of homes beside a real map, because the job of the page is to help someone find where to live, not to impress them.

Challenge

A first version was a cinematic scroll film with a card grid beneath it, and it looked like the other concept sites in this portfolio. The brief changed to: design around what a home-seeker actually does. That meant a map, a way to compare, and honest numbers — including the local ones, such as rent paid a year at a time and off-plan payment plans.

Approach

A split-screen explorer. Homes sit in a list on the left and as price pins on the map on the right; hovering a card lights its pin and clicking a pin brings its card into view. Buy, Rent and Off-plan are separate searches with their own budgets, and every filter lives in the web address, so a search can be shared as a link. Up to three homes can be ticked for a side-by-side comparison with the best value highlighted.

Design

An app-like, practical interface rather than an editorial one: a utility header, compact filters, dense but clear cards, navy ink with a green accent for prices and coral for the selected pin. Prices always appear in both Naira and US dollars, with a switch for which one leads.

Development

Next.js 16, React 19 and TypeScript, with Leaflet and OpenStreetMap for the map (no API key). Filters are read from and written to the URL, the map and list share one filtered set, and favourites, comparison and currency persist in localStorage. Pages are statically generated: one per home and one per neighbourhood. Calculators are plain client components: a mortgage estimate for sales, an instalment plan for off-plan, and a move-in cost breakdown for rentals.

Responsive Experience

On a phone the list and the map swap with a floating toggle, listing cards stack with the photo on top, and the map re-measures itself when it is shown. A bug where the hidden map came up empty was found by screenshotting the phone view and fixed before this entry was written.

Final Result

Live at ile-rho.vercel.app as a portfolio piece on map-based search. ILÉ is fictional: the homes, prices, area figures, agents and the ₦1,500 per $1 rate are invented, the WhatsApp number is a placeholder, and the photographs are real homes from Unsplash contributors used for illustration.

Key Features

• Split-screen search with a real map, price pins and hover and click sync
• Buy, Rent and Off-plan searches with filters stored in a shareable URL
• Side-by-side comparison of up to three homes, with price per m²
• Naira and dollar pricing everywhere, with title documents, power and security on each home
• Rent shown per year with the agency, legal and caution fees; off-plan payment-plan and mortgage calculators
• Twelve neighbourhood pages with average prices and typical journeys, and WhatsApp contact on every home