Web
Dream Home Property — a React single-page site for a property dealer in Rewa
A navy-and-gold single-page app for a Rewa property dealer: listings with their own pages, services, an announcement bar for launches, RealEstateAgent structured data and WhatsApp enquiries.
Problem
What needed solving?
A property dealer handling plots, houses, flats, rentals and commercial space needed a site that feels established and trustworthy, can announce a new launch at the top of every page, gives each listing a page of its own, and turns a visit into a WhatsApp conversation from any screen.
Context
Who was it for?
Client site · Property dealer, Rewa (MP)
Approach
- Build a single-page app with client-side routes for home, about, services, the property list and a page per property slug, so listings can be shared as links.
- Design around a navy and gold palette with Playfair Display for headlines and Plus Jakarta Sans for text — the site's own tokens, applied through Tailwind.
- Put an announcement bar above the header for launches and make 'Enquire on WhatsApp' the primary action beside 'Browse properties'.
- Publish the business as RealEstateAgent structured data with its address and contact details, and embed a map on the contact page.
Architecture
How the system was designed.
A Vite-built React single-page application served as static files. React Router handles the routes, Framer Motion the reveals and transitions, and the property and service content lives in the bundle's data modules. Metadata and JSON-LD sit in the static HTML shell; enquiries open WhatsApp or email.
Implementation
What was built.
- 01Vite + React with React Router routes for home, about, services, properties, each property by slug, and contact.
- 02Tailwind CSS with brand tokens — navy, navy deep, gold, gold soft, gold deep, ivory, cream, ink — and Playfair Display with Plus Jakarta Sans loaded as variable fonts.
- 03Framer Motion for section reveals and page transitions; a scroll cue and decorative corner rules on the hero.
- 04RealEstateAgent JSON-LD with the office address, slogan, telephone and email; Open Graph tags and a theme colour in the static shell.
- 05An embedded Google Map on the contact page and WhatsApp and email calls to action throughout.
AI
Where AI was used and why.
This project did not use AI — a deliberate choice. Not every system needs a model.
Technology
Relevant stack.
- React
- Vite
- React Router
- Framer Motion
- Tailwind CSS
- JSON-LD
- Railway
Outcome
Only factual results.
Outcome to be added. Results are only published here when they can be stated factually — no estimated metrics.
Lessons
Important engineering insights.
- A per-listing route is the difference between a brochure and a catalogue — dealers share links, not pages.
- An announcement bar driven by content lets the owner run a launch without touching the design.
Have a project in mind?
Tell me what you're trying to build. I'll come back with an honest view on scope, architecture and the right approach.