DMO-frontend

DriveModeOn frontend — one multi-tenant Next.js (App Router) codebase that serves many sites, themed and titled per tenant by request host.

The companion API lives in DMO-backend.

Prerequisites

• Node >= 20
• pnpm (or npm)

Getting started

pnpm install      # or: npm install
pnpm dev          # http://localhost:3000

Copy .env.example to .env.local and point NEXT_PUBLIC_API_URL at the running backend (defaults to http://localhost:4000).

Multi-tenancy

A request is mapped to a tenant by hostname. The registry lives in src/lib/tenants.ts. Resolution order:

1. ?tenant=<id> query param (local dev override)
2. Request Host (full domain or <id>.localhost / <id>.drivemodeon.com)
3. Falls back to the default tenant

src/middleware.ts resolves the tenant and forwards it as the x-tenant-id header; server components read it via src/lib/tenant.ts, and layout.tsx applies per-tenant theming/titles through CSS variables.

The tenant registry is intentionally duplicated with the backend's src/tenants.ts. Update both when adding a tenant. If it grows, promote it to a shared published package.

Try it locally

• http://localhost:3000/ — DriveModeOn (default, blue)
• http://localhost:3000/?tenant=acme — Acme Motors (red)

In production each tenant maps to its own host/subdomain (e.g. acme.drivemodeon.com).

Adding a tenant

Append a Tenant to the tenants array in src/lib/tenants.ts with its id, name, hosts, and theme — then mirror it in the backend.

Scripts

Command	What it does
pnpm dev	Dev server on :3000
pnpm build	Production build
pnpm start	Run the production build
pnpm lint	Lint
pnpm typecheck	Type-check only