Theme
Language 中文
← Back to projects YSKM523 / modbox-modular-website

ModBox Modular

Marketing and operations site for ModBox NWO Inc., a Thunder Bay modular home builder serving Northwestern Ontario and First Nations communities — full-stack Next.js, self-hosted, with a zero-trust Tailscale-only admin.

Live · Client Production Solo Engagement · Design + Full-Stack + Infra last updated: May 26, 2026
Live site Code

Context

ModBox NWO Inc. is a real-world manufacturer: a factory in Thunder Bay that builds full modular homes — wood-frame, light-steel-frame, and fully custom — and ships them by truck to communities across Northern Ontario, including remote First Nations.

The site is the digital front door for that operation. Its job isn’t to look like a brochure; it’s to tell the company’s story, present the three modular systems a buyer chooses between, explain end-to-end how a project actually happens, show the portfolio of delivered builds, document the First Nations community work, surface press and funding milestones, and capture leads that land straight in the team’s inbox. Behind it runs a private operations dashboard the team uses to triage submissions and watch traffic — never exposed to the open internet.

Homepage — full-bleed factory-floor hero video, company stats, model lineup teaser, recent featured projects.
Homepage — full-bleed factory-floor hero video, company stats, model lineup teaser, recent featured projects.
About — company story, the people, the Bailey Avenue shop, and a milestone timeline from incorporation onward.
About — company story, the people, the Bailey Avenue shop, and a milestone timeline from incorporation onward.
Models — three systems, one standard: Wood Modular, Light Steel Modular, Custom.
Models — three systems, one standard: Wood Modular, Light Steel Modular, Custom.

Approach

A real public site, hand-built — not a template

The whole front end is bespoke. Next.js 16 App Router with React Server Components, React 19, TypeScript 5, and Tailwind v4 on the new @tailwindcss/postcss engine — but no Bootstrap, no Material, no off-the-shelf component kit. Every component is tuned to the brand and laid out responsively from 320px mobile up to 3840px ultrawide.

The two interaction pieces that carry the marketing pages:

  • Smooth scroll via Lenis on the long story / process / portfolio pages.
  • An interactive Leaflet map for the First Nations section — every community ModBox has served (Pikangikum, Deer Lake, Mishkeegogamang, Muskrat Dam, and more), each with a deep-dive build page.

The hero video that actually plays

A 1080p factory-floor hero video sits at the top of the homepage. Getting autoplay to survive across mobile Safari took real work: autoplay-safe attributes, iOS-compatible encoding, and a JS playback-recovery path for the cases where Safari refuses to start. On a marketing site the hero is the first impression — a black box where the video should be is a bounce.

Model detail — framing approach, finish standards, typical use cases, and how to choose.
Model detail — framing approach, finish standards, typical use cases, and how to choose.
Process — intake → site survey → design → factory build → transport → install, written for first-time modular buyers.
Process — intake → site survey → design → factory build → transport → install, written for first-time modular buyers.
Projects — 20+ delivered builds across the north, each with photos, build details, and program context.
Projects — 20+ delivered builds across the north, each with photos, build details, and program context.
First Nations — a dedicated section with an interactive Leaflet map of every community served.
First Nations — a dedicated section with an interactive Leaflet map of every community served.
Community deep-dive — e.g. the Pikangikum fitness centre and teacher housing.
Community deep-dive — e.g. the Pikangikum fitness centre and teacher housing.
News — press, funding (OHFC, NOHFC), and design-build contract announcements from the yard.
News — press, funding (OHFC, NOHFC), and design-build contract announcements from the yard.
Contact — a working form that validates, stores, and emails the team with the visitor set as Reply-To.
Contact — a working form that validates, stores, and emails the team with the visitor set as Reply-To.

Backend: contact + analytics, no third parties

The dynamic parts run on Next.js Route Handlers (Node.js runtime):

  • Contact — submissions are validated, stored in PostgreSQL, and delivered to the team via Resend with the visitor’s address set as Reply-To, so a reply from the inbox goes straight back to the lead.
  • Analytics — first-party pageview ingest into local Postgres, enriched with geoip-lite for country-level geolocation. No Google Analytics, no third-party trackers — GDPR-friendly by construction.

Zero-trust admin: invisible, not just login-gated

The internal operations dashboard (contact triage, submission detail, CSV export, traffic analytics) is not protected by a password — it’s protected by being unreachable. A Next.js middleware at the edge allows only loopback and Tailscale CGNAT (100.64.0.0/10); to anyone else, every admin route and admin API simply returns 404. The panel is reachable only over Tailscale by team members on the same tailnet. There is no login page to attack because there is no public surface to find.

Results & What I Learned

Live in production at modboxmodular.com. Every page is in active use by a real Thunder Bay manufacturer; visitor submissions reach the team’s inbox and the admin dashboard is used daily to triage them. This public repo is a showcase — the application source lives in a private repository to protect the client’s content, admin code, and infrastructure details.

The deployment is deliberately boring and owned end-to-end: a single Ubuntu 24.04 VM, PM2 running next start, Caddy terminating TLS, local PostgreSQL 16 on loopback with peer auth, Tailscale for private admin. Production deploys are git pull && npm run build && pm2 restart modbox.

Two things this build reinforced:

  • “Invisible” beats “guarded” for an admin surface. A login page is an invitation; a 404 is a dead end. Scoping the admin to loopback + tailnet at the edge means the most sensitive part of the system has no public attack surface at all — and it cost less code than a real auth flow would have.
  • First-party analytics is a feature, not a compromise. Dropping third-party trackers and ingesting pageviews into local Postgres gave the client honest traffic data, geo enrichment, and zero GDPR baggage — without handing visitor behaviour to anyone.

Tech Stack & Links

Framework: Next.js 16 (App Router, RSC, Route Handlers) · React 19 · TypeScript 5

Styling & UI: Tailwind CSS v4 · fully bespoke components · responsive 320px → 3840px

Interactivity: Lenis (smooth scroll) · Leaflet (First Nations map) · autoplay-safe <video> hero · 3D model viewer

Backend: Next.js Route Handlers · Resend (reply-to email) · postgres.js · PostgreSQL 16 · geoip-lite

Infra: Ubuntu 24.04 VM · PM2 · Caddy (TLS) · Tailscale (zero-trust admin) · Node.js 20

Repo: github.com/YSKM523/modbox-modular-website (showcase — source kept private) · Live: modboxmodular.com