MED Science
MED Science & Innovation Systems makes medical-compression bodywear sold through exclusive distributors across the Americas. I designed and built its platform on the same Next.js codebase that runs its sister brand, Moldeate World: an institutional site, a self-contained store per country, a distributor portal, and a two-way bridge to the company's self-hosted Odoo ERP. The stores open market by market; until then the public site is a coming-soon page built around the brand's institutional film.
- # next.js
- # typescript
- # odoo
- # postgresql
- # vitest
The problem
MED's previous websites ran on WordPress and WooCommerce, with placeholder figures, unverified product claims and contact forms that silently sent nothing, while its clinical products sat mixed into the sister brand's ERP. Because MED sells through exclusive distributors, every country needed its own prices, currency, taxes and payment method, and each distributor's territory had to be protected from cross-border pricing. All of it had to share infrastructure with Moldeate World while keeping customers, catalogs and financial data strictly apart.
The solution
- One Next.js 14 App Router codebase in strict TypeScript serves both brands. The brand is picked at build time and each one deploys as its own Vercel project with its own theme, catalog and Neon PostgreSQL database.
- A self-contained store per country (Canada, United States, California, Peru, Argentina) with its own currency, language, taxes and payment gateway (Square, Stripe, Niubiz), each opened independently through environment flags.
- Edge geo-gate in Next.js middleware: IP-based routing sends visitors to their market's store and enforces each distributor's price exclusivity, unopened markets stay behind a signed preview cookie for staff, and the old domains permanently redirect to the new one.
- Distributor portal (B2B) with NextAuth against Odoo users: orders, invoices and quotes with PDFs streamed straight from the ERP, and every query scoped to the distributor's company so one brand can never read the other's data.
- Two-way sync with a self-hosted Odoo Community 19 through a hand-rolled XML-RPC client: online orders become sale orders in the right company and warehouse, and stock changes flow back to the stores within minutes through an Odoo webhook, with a nightly reconciliation per market.
- A med-tech redesign with a video hero, a scroll-driven science page, a distributor globe and a body-scan size guide. The coming-soon page plays the institutional film with its captions rendered as real, translatable HTML in sync with the video.
Results
- Home page LCP cut from 4.2 s to 1.5 s by shipping the cookie notice with the server-rendered HTML.
- Fonts preloaded per page cut from 274 KB to 143 KB by loading only each brand's own typefaces, improving LCP by 0.6–0.9 s on throttled mobile tests.
- Coming-soon page with the brand film: LCP of 0.7–1.0 s measured in production.
- WCAG AA contrast verified by an automated audit across 3,290 rendered texts, with zero failures.
- 1,640 automated tests (Vitest) gate every change in CI, including tests that keep unsourced figures and unverified medical claims out of the copy.
Tech stack
- frontend
-
- Next.js 14 (App Router)
- React 18
- TypeScript (strict)
- Tailwind CSS
- backend & data
-
- Route Handlers
- Neon PostgreSQL
- Drizzle ORM
- Zod
- NextAuth
- Upstash Redis
- erp & payments
-
- Odoo Community 19
- XML-RPC
- Square
- Stripe
- Niubiz
- infra & quality
-
- Vercel (edge middleware, cron)
- Sentry
- Vitest
- Playwright
- GitHub Actions