Theme
Language 中文
← Back to projects

McRae Development Corp.

Marketing and leasing site for a family-owned Thunder Bay developer building Riverside on John, a four-phase apartment community on the McIntyre River corridor. Data-driven phase and unit pages, a photography-led design, booking enquiries that never get lost, and rich structured data.

Live · Client Production Solo Engagement · Design + Full-Stack
Live site

Context

McRae Development Corp. is a family-owned developer in Thunder Bay. Its current project, Riverside on John, is a small community of fourplex apartment buildings on the McIntyre River corridor, delivered in four phases: Phase One is occupied, Phase Two is leasing now, and Phases Three and Four are still to come.

The site has two jobs. It has to make a quiet, private development feel like somewhere you want to live, and it has to turn that interest into booked viewings for the units that are actually available. It also has to keep working as later phases arrive without needing a redesign. I designed and built it end to end.

Screenshots are taken at 3840×2160, the way the site looks on a 32-inch 4K monitor.

Homepage: full-bleed aerial hero with the key facts for the current phase.
Homepage: full-bleed aerial hero with the key facts for the current phase.
Photography first: finished interiors and the building, not stock imagery.
Photography first: finished interiors and the building, not stock imagery.
About: the four-phase masterplan as a single aerial rendering.
About: the four-phase masterplan as a single aerial rendering.

Approach

A warm, photography-led design

The palette is espresso brown, warm cream and a single copper accent, with heavy uppercase headings and generous whitespace. It should read like a premium residential brand rather than a rental listing. Real photographs of the finished interiors lead wherever they exist, and renderings are used only for what isn’t built yet. Lenis smooth scrolling and scroll-triggered reveals give the long pages some rhythm, and both are switched off for visitors who ask for reduced motion.

Model the development, not the pages

Every phase and unit is defined once in a typed data file: status, availability, floor, size, beds and baths, features, gallery and move-in date. The rest of the site is generated from that file:

  • the phase pages and unit pages, through dynamic routes;
  • the “available units” cards and the homepage feature strip;
  • the development timeline, where Phase Two is highlighted as the one you can reserve;
  • the structured data that search engines and AI assistants read.

When Phase Three opens, it is a data change, not a redesign. Mirror-image units such as 2A and 2B share a single page, because to a renter they are the same home.

The development timeline, generated from the phase data.
The development timeline, generated from the phase data.
Phase Two: the phase that is leasing now gets the hero.
Phase Two: the phase that is leasing now gets the hero.
What every unit includes, and what is close by.
What every unit includes, and what is close by.
Available units, each card driven by the same data.
Available units, each card driven by the same data.
Unit page: gallery, specs, features and a direct path to booking a viewing.
Unit page: gallery, specs, features and a direct path to booking a viewing.
Full-screen gallery with arrow-key and Esc navigation.
Full-screen gallery with arrow-key and Esc navigation.

Booking enquiries that can’t get lost

The contact page is built around a single form for booking a viewing. Each submission is sent through Resend, one email per recipient so team addresses are never exposed to one another. Every enquiry is also written to an on-disk archive and to the dashboard’s database, together with whether the email went through. If the mail provider has a bad day, the lead still exists. Form interactions feed the same first-party analytics as the dashboard, so the team can see where people stop filling it in.

Built to be found

  • Structured data that describes the real thing. ApartmentComplex and Apartment schema with address, floor size, bedrooms, amenities and an Offer with monthly pricing, plus BreadcrumbList on every phase and unit page. All of it is generated from the same data file, so the markup can never disagree with the page.
  • Canonicals, llms.txt, a sitemap with accurate lastmod dates, and IndexNow submissions on deploy.

An admin dashboard, reused

After launch I ported the ModBox Admin console into this site: the leads CRM, first-party analytics and form drop-off reports, adapted to this site’s booking-form fields. Two client sites now share one operations toolkit.

Contact: one focused form for booking a viewing.
Contact: one focused form for booking a viewing.

Results & What I Learned

Live at mcraedevcorp.com and leasing Phase Two. It was built over roughly two months of steady commits from June to August 2026, ending with a long tail of small, fast copy and photo edits as the client saw it in use.

  • Model the business first. A phased development is a dataset that changes over time. Putting phases and units in one typed source made every later change cheap, including the structured data.
  • A lead should never depend on one delivery path. Archiving every enquiry, whatever happens to the email, costs a few lines of code and removes an entire class of “we never got your message”.
  • Build once, reuse across clients. The admin console was written for ModBox and ported here with small changes, so a second client got a mature tool on day one.

Tech Stack & Links

Site: Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS · Lenis

Leads: Resend · on-disk enquiry archive · first-party form analytics

SEO: Schema.org (ApartmentComplex, Apartment, Offer, BreadcrumbList) · llms.txt · IndexNow

Live: mcraedevcorp.com