The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
🧪 Just shipped Labpath — a 19-route Diagnostic Lab & Patient Portal Next.js template!
Most healthcare and clinic templates stop at a static landing page and a generic contact form. With Labpath, I wanted to design and engineer the complete diagnostic patient journey end-to-end using Next.js 16, React 19, TypeScript 5, and Tailwind CSS 4.
Here’s what I built:
🧬 2-Pane Biomarker Assay Workbench (/portal) — Interactive patient dossier where patients filter assays by clinical panel and inspect calibrated reference-range rails, plain-English interpretations, and 3-visit longitudinal history.
📅 5-Step Requisition Booking Wizard (/book) — Deep-linkable scheduling supporting both Draw Center appointments and Home Phlebotomy visits, complete with intake validation and .ics calendar export.
🔎 Faceted Test Catalog & Package Matrix (/tests, /packages) — 22 diagnostic assays across 7 clinical categories with URL-synced filters + 6 bundled checkup packages with a sticky comparison matrix.
♿ Clinical-Grade Accessibility — Strictly verified against WCAG 2.2 AA contrast standards across desktop and mobile with 27 Vitest unit tests and 36 Playwright E2E checks.
Swipe through the shots below to see the clinical monochrome + surgical-blue design system in action. Would love to hear your thoughts! 👇
🔗 Explore the live interactive preview & get the full Next.js 16 source code here:
👉 Labpath Template & Live Demo: https://wrapmarket.com/item/labpath-diagnostic-lab-patient-portal-next-js-template-WHB8KG05B
🛍️ Browse more templates in my store: https://wrapmarket.com/shop/NacyDev
Really solid scope for a template. I work on a healthcare analytics platform, and reference-range rails with plain-English interpretations are exactly what helps patients actually understand their results. URL-synced filters plus 36 Playwright E2E checks is a great touch too....
Thanks so much, Sabin! Really appreciate that coming from someone building in healthcare analytics 🙌
I actually went with a hybrid of both so it works for quick visual scanning as well as clinical/screen-reader precision:
On the Portal Overview (/portal): Each biomarker card...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Coming-soon landing page design & development for Peak.
Most coming-soon pages just say "soon". I wanted this one to show the whole product. 🚀 🚀 🚀
gopeak.design is the coming-soon site for Peak, an all-in-one WordPress plugin: a visual builder, a motion engine, a CMS and a design system.
The stage
Instead of screenshots, the middle of the page plays the product: 9 features, 43 scenes, 325 frames. I designed every frame in Figma, then built a Figma-to-code pipeline and a React scene engine to play them. Elements morph from frame to frame while the pointer clicks, drags, types and scrolls. All of it is live HTML and CSS, not video, with its own player and speed control.
The details
• The page opens on the Peak mark filled with a liquid WebGL shader that stirs as you move your cursor.
• A waitlist that catches email typos, checks for bots with Cloudflare Turnstile, and sends branded emails.
• A live demo of the real builder, opened by a magic link: a WordPress sandbox where every change is rolled back.
• Desktop, tablet and phone, each designed in Figma first.
The look carries over from the Peak brand identity I shared a few days ago: Parchment and Carbon, Neue Montreal and its Mono, fine hairlines, and Ember used only as a signal.
Stack: Figma · Next.js · React · Claude Code · Tailwind CSS · WebGL · Supabase · Resend · Vercel · Cloudflare · WordPress
See it live → gopeak.design
Just converted it https://framer.com into Next.js in 50 seconds with deframer...
100% accurately..
comment "framer" if you need code
Complete Technical SEO Checklist for Next.js Developers (2026)
A practical, step-by-step technical SEO checklist for Next.js App Router sites, covering crawlability (robots.ts, sitemap.ts), metadata and canonical URLs, JSON-LD structured data, Open Graph, Core Web Vitals fixes with next/image and next/font, mobile-friendliness, and content quality. Also covers why the same fundamentals matter for AI search visibility. Published on DevStacked, my developer blog covering practical Next.js and SaaS implementation guides.
