Marketing and operations site for ModBox NWO Inc., a Thunder Bay–based modular home builder serving Northwestern Ontario and First Nations communities across the north.
🌐 Live site: modboxmodular.com
This repo is a public showcase of the modboxmodular.com website. The full source code lives in a private repository and is not published here — this page exists so visitors, employers, and collaborators can see the work, browse the live experience, and understand the technology behind it.
If you want to talk about the project or see code samples privately, reach out through the contact page on the live site.
ModBox Modular is the digital front door for a real-world manufacturing operation. The factory in Thunder Bay builds full modular homes — wood-frame, light-steel-frame, and fully custom designs — and ships them by truck to communities across Northern Ontario, including remote First Nations.
The website's job is to:
- Tell ModBox's story — who the company is, the people behind it, the facility, and the standards it builds to.
- Present the product lineup — the three modular systems (wood, light steel, custom) and how a buyer chooses between them.
- Explain how a project actually happens — the end-to-end build process from intake to install, in plain language.
- Show real, completed work — the project portfolio with photos and details from each delivered build.
- Document First Nations work — a dedicated section for community projects (Pikangikum fitness centre, teacher housing, Deer Lake, Mishkeegogamang, Muskrat Dam, and others), including an interactive map.
- Surface press and milestones — funding announcements, government contracts, and news coverage from across Northern Ontario.
- Capture leads — a contact form that routes inquiries straight to the team's inbox with the visitor's reply-to address attached.
Behind the public site there is also a private operations dashboard (not exposed to the open internet) used internally to triage contact submissions and watch traffic — described briefly below for context.
A full-bleed hero video of the factory floor sets the tone, followed by company stats, the model lineup teaser, recent featured projects, and partnership context.
Company background, the people behind ModBox, the Bailey Avenue shop in Thunder Bay, and a milestone timeline from incorporation through current operations.
The product lineup: Wood Modular, Light Steel Modular, and Custom. Each option leads to a deeper page that walks through framing approach, finish standards, typical use cases, and decision criteria.
A step-by-step explanation of how a project moves from initial conversation through site survey, design, factory build, transport, and on-site installation. Written for clients who have never bought a modular home before.
The portfolio. Twenty-plus delivered projects across First Nations communities — Pikangikum, Deer Lake, Mishkeegogamang, Muskrat Dam, and more — each with photos, build details, and program context (housing, education, recreation, community infrastructure).
A separate microsite for ModBox's work with First Nations clients, including an interactive Leaflet map of every community served and deep-dive pages for individual builds (e.g. Pikangikum Fitness Centre, teacher housing).
A chronological feed of press releases and coverage — Ontario Heritage Fund Corporation investments, Thunder Bay design-build contracts, NOHFC announcements with original press-event photography.
A working contact form that posts to a serverless endpoint, validates and stores the submission, and sends an email to the team with the visitor's address set as Reply-To so replies land in the right inbox.
Framework & language
- Next.js 16 (App Router, React Server Components, route handlers)
- React 19
- TypeScript 5
Styling & UI
- Tailwind CSS v4 (with the new
@tailwindcss/postcssengine) - Custom typography, motion, and layout — no off-the-shelf component kit
- Hand-built responsive layouts down to 320px mobile, scaled up to 3840px ultrawide
Interactivity
- Lenis for smooth-scroll on long marketing pages
- Leaflet for the First Nations interactive map
- Native
<video>with mobile-optimized encoding for the hero (1080p source, autoplay-safe attributes, JS playback recovery) - 3D model viewer for selected home configurations
Backend / API routes
- Next.js Route Handlers (Node.js runtime) for the contact endpoint and analytics ingest
- Resend for transactional email delivery with reply-to routing
- postgres.js talking to a local PostgreSQL 16 instance for contact submissions and pageview analytics
- geoip-lite for country-level visitor geolocation on analytics (no third-party tracker)
Internal operations dashboard (private, not exposed to the public internet)
- Admin views for contact triage, submission detail, CSV export, and traffic analytics
- Access-controlled at the edge via a Next.js middleware that allows only loopback and Tailscale CGNAT (
100.64.0.0/10) — no password, no public surface - Reachable only over Tailscale by team members signed into the same tailnet
Infrastructure & deployment
- Self-hosted on a Linux VM (Ubuntu 24.04)
- PM2 as the process manager running
next start - Caddy (or equivalent reverse proxy) terminating TLS on
modboxmodular.com - Local PostgreSQL 16 with peer authentication on loopback
- Tailscale for private admin access from any team device
Tooling
- ESLint with
eslint-config-next - Node.js 20 runtime
- Git on a private remote; production deploys are
git pull && npm run build && pm2 restart modbox
- Real production system, not a demo. Every page on the live site is in active use by a real Thunder Bay manufacturer. Visitor submissions reach the team's inbox; the admin dashboard is used to triage them.
- Hand-crafted responsive design. No Bootstrap, no Material, no Tailwind UI library — every component is bespoke and tuned for the brand.
- Mobile hero video that actually plays. Autoplay-safe attributes, iOS-compatible encoding, and a JS recovery path for the cases where Safari decides to be Safari.
- No third-party analytics. First-party pageview ingest into local Postgres with geo-IP enrichment — zero external trackers, GDPR-friendly by construction.
- Zero-trust admin surface. The admin panel and admin APIs are simply invisible (404) to anyone whose source IP isn't loopback or Tailscale. No login page to attack.
YSKM523 — design, frontend, backend, infrastructure, and deployment.
This project was built end-to-end as a solo engagement: discovery and content with the ModBox team, brand and visual direction, full-stack implementation, server provisioning, and ongoing operations.
The application source lives in a private repository to protect the client's content, internal admin code, and infrastructure details. This public repo is intentionally scoped to a showcase — the live site at modboxmodular.com is the canonical artifact. Reach out via the contact page if you'd like to discuss the build in more depth.