A complete diagnostic laboratory website, test catalog, online requisition booking wizard, and interactive patient portal template built with Next.js 16 App Router, React 19, TypeScript 5, and Tailwind CSS 4.

Designed for diagnostic laboratories, preventive biomarker clinics, concierge medicine practices, phlebotomy draw centers, and digital health platforms that need clinical credibility alongside plain-English patient clarity.

What Makes Labpath Different

Most medical and clinic templates stop at a static landing page and a generic contact form. Labpath ships a complete, end-to-end diagnostic journey across 19 routes—connecting public test discovery and multi-step specimen scheduling directly to a live, stateful Patient Portal:

• Patient Dossier & 2-Pane Assay Workbench (/portal) — A clinical patient dossier header with an animated Optimal Reference Index (CountUp), paired with a 2-pane interactive report workbench where patients filter biomarkers by panel (Needs attention, Lipids, Blood sugar, Vitamins and iron, Thyroid, Blood count, Kidney and liver) and inspect any marker's calibrated reference-range rail, plain-English interpretation, and 3-visit longitudinal draw history.
• 5-Step Requisition Booking Wizard (/book) — Supports deep-linking a single test (?test=lipid-panel), a bundled checkup package (?package=complete-wellness), or rescheduling an existing appointment (?reschedule=apt-3391). Includes collection method selection (Portland Draw Center vs. $29 Home Phlebotomy Visit), date & time-slot selection, patient intake validation, and instant confirmation with .ics calendar export.
• Interactive Lab Report & Print-Ready Requisition (/portal/results/[id]) — Full clinical lab report featuring an 8-category panel filter bar, expandable analyte rows with historical trajectories, specimen chain-of-custody progress tracker, signed pathologist synthesis, and @media print formatting (?print=1).
• Faceted Test Catalog & Package Comparison (/tests, /packages) — Searchable catalog of 22 diagnostic assays across 7 clinical categories with URL-synced filters (category, fasting requirement, sample type, home collection, and sort order) plus 6 bundled wellness packages with a sticky cross-package biomarker comparison matrix.

Included Routes (19 Complete Pages)

• Public Marketing & Discovery: Home (/), Test Catalog (/tests), 22 Test Detail Pages (/tests/[slug]), Checkup Packages (/packages), 6 Package Detail Pages (/packages/[slug]), 5-Step Booking Wizard (/book), Collection Services & Draw Centers (/services), Transparent Self-Pay & HSA/FSA Pricing (/pricing), About & Accreditation (/about), Clinical Guides (/resources, /resources/[slug]), FAQ Help Center (/faq), Contact (/contact), and Portal Sign-In (/sign-in).
• Interactive Patient Portal: Patient Dossier Dashboard (/portal), Lab Results Archive (/portal/results), Interactive Biomarker Report (/portal/results/[id]), Appointments Manager (/portal/appointments), Appointment Requisition Detail with Reschedule/Cancel (/portal/appointments/[id]), Longitudinal Health Metrics Logger (/portal/metrics), Patient Profile (/portal/profile), and Portal Settings with Demo Reset (/portal/settings).

Technical Highlights

• Next.js 16.4 (App Router) with static/SSG prerendering (output: "export" configured)
• React 19.3 & TypeScript 5.9 (strict: true)
• Tailwind CSS 4.2 with semantic clinical design tokens (src/styles/globals.css & tokens.json)
• Zustand 5 persisted browser store (labpath-portal-v1) powering bookings, rescheduling, cancellations, unread report badges, metric logging, and profile updates
• React Hook Form 7 + Zod 4 for accessible, schema-validated forms
• Radix UI + Lucide Icons + Motion for React 12 + React Bits (CountUp, DecryptedText, SpotlightCard, Magnet, BlurText) respecting prefers-reduced-motion
• Verified Quality: 27 Vitest unit tests + 36 Playwright E2E and automated @axe-core/playwright WCAG 2.2 AA accessibility checks across Desktop and Mobile

Please Note

• Frontend template only. No backend server, shared database, production authentication, payment gateway, or live HL7/FHIR laboratory integration is included. Interactive portal actions persist locally in the visitor's browser via localStorage (labpath-portal-v1) and can be reset at any time from /portal/settings. See docs/data-and-backend.md for backend integration points.
• All patient records (Elena Marsh), clinicians, CLIA numbers, draw centers, and diagnostic values are fictional demo content for presentation purposes.