The public website
What the agency's website does: the home page, the listings and their filters, the property page with its staged room, saved homes and compare, viewing requests, the contact form, search engines and marketing tags.
For the Full Stack package
Pages
Every page exists in English under /en and in Arabic under /ar. The website has no accounts and no sign-in.
| Page | Path | What it shows |
|---|---|---|
| Home | /en | A search attached to the hero photograph (buy or rent, area, type, budget), the featured homes the agency picks in its dashboard, the property types with their counts, a before-and-after of an AI-staged room, buying and renting side by side, the neighborhoods, the agency introduction, the newest rentals, common questions and a contact band. |
| Homes for sale, for rent | /en/properties?purpose=sale, /en/properties?purpose=rent | The listings, with filters, sorting and pages. |
| A property | /en/properties/the-terrace-residence | The photos, the price and key facts, the description and amenities, the staged room, the neighborhood, similar homes and a viewing request. |
| Saved homes | /en/saved | The homes the visitor saved, kept in their browser. |
| Compare | /en/compare | Up to three saved homes side by side. |
| Our agency | /en/agency | The agency's story, its tagline and description from the dashboard. |
| Contact | /en/contact | The agency's details and the contact form. |
| Privacy policy | /en/privacy | Template copy to rewrite before going live. |
The listings
- Filters for area (neighborhood), price, bedrooms, property type (
apartment,villa,townhouse) and amenities, kept in the address, so a search can be shared, refreshed and walked with back and forward. - Sorting by newest, price from low to high, or from high to low, and pages of six homes.
- Only published homes appear. Rentals show their yearly price; every price is the currency code followed by the amount, such as
AED 4,850,000.
The property page
- A photo grid with a viewer that works from the keyboard, the price and key facts (bedrooms, bathrooms, area in square metres, parking, furnishing, outdoor space), the description and the amenities.
- Virtual staging: when the agency has approved a staged preview for public display, a draggable slider compares the empty room with the furnished one, labelled as furnished with AI. One public preview per property.
- The neighborhood: an area photograph and a short description. The website shows no map; the location is marked approximate unless the agency set it exact.
- Up to three similar homes, and a button to ask about the home on the contact page (
/contact?property=<slug>).
Viewing requests
The visitor gives a name, an email, an optional phone, a preferred date and a time, and an optional message. Times are offered every half hour from 09:00 to 18:00 in the agency's time zone (Asia/Dubai), at least an hour ahead. The request is shown as awaiting confirmation, with its reference, never as a booked appointment, and it lands in the dashboard's Viewings with a notification.
The contact form
Buy or rent, a preferred area, a budget and a message, with the visitor's name, email and optional phone, and consent to the privacy policy. Opened from a property, it carries that home. Each submission becomes an inquiry in the dashboard, with a notification.
Both forms carry a hidden field that catches bots, send the same request only once, and accept five submissions per address in ten minutes.
Saved homes and compare
A visitor saves homes and compares up to three side by side without an account; a fourth is refused with an announcement. Both lists are kept in the visitor's browser and never reach the API.
Search engines
- Every page sets its own title, description, canonical address and the alternate language, built from
NEXT_PUBLIC_SITE_URL. A property page uses the property's own SEO title and description and its cover photo for sharing. /sitemap.xmllists every public page in both languages and every published property;/robots.txtpoints to it. Saved homes and compare are markednoindex.
Analytics and tracking tags
Six networks are wired in. Turn one on by putting its id in .env (with Docker Compose, in the .env beside docker-compose.yml) and rebuilding; an id left blank loads no script.
| Variable | Network |
|---|---|
NEXT_PUBLIC_GTM_ID | Google Tag Manager |
NEXT_PUBLIC_GA4_MEASUREMENT_ID | Google Analytics 4 |
NEXT_PUBLIC_META_PIXEL_ID | Facebook and Instagram |
NEXT_PUBLIC_TIKTOK_PIXEL_ID | TikTok |
NEXT_PUBLIC_SNAPCHAT_PIXEL_ID | Snapchat |
NEXT_PUBLIC_PINTEREST_TAG_ID |
| Event | When |
|---|---|
page_view | Every route change |
view_property | A property page is shown |
save_property | A home is saved |
viewing_request | A viewing request is received |
contact_submit | The contact form is received |
- If GA4 runs inside your Tag Manager container, leave the GA4 id blank, or every session is counted twice.
NEXT_PUBLIC_ANALYTICS_CURRENCY(AEDby default) is sent with every tracked price, andNEXT_PUBLIC_ANALYTICS_DEBUG=truelogs each event to the browser console.- The tags load as soon as the page does. If you serve visitors in the EU or the UK, put a consent banner in front of them first.
How the website's code fits together
Included with your purchase. Sign in to read, or open it in your download.
The code's structure and the conventions to keep when you change it.