Skip to Content
Applications@loop/loop-health

@loop/loop-health — Marketing Site & User Dashboard

Public-facing marketing website and authenticated user dashboard for Loop Health. Handles enrollment flows, content marketing, video consultations, and protocol onboarding.

Purpose

The loop-health app serves as the primary entry point for new and existing customers:

Marketing Site

  • Homepage and product landing pages
  • Educational content and blog
  • Enrollment funnel and onboarding
  • Pricing and product comparison
  • SEO-optimized content pages

User Dashboard

  • Video consultation scheduling
  • Onboarding workflow (health questionnaire, lab orders)
  • Protocol recommendations
  • Educational resources
  • Expert call interface (Stream.io)

Focuses on conversion and onboarding, while my-loop-health handles ongoing protocol management.

Architecture

Route Structure

Public Routes (app/)

  • / — Homepage
  • /products — Product catalog
  • /peptides — Peptide education
  • /stacks — Stack recommendations
  • /blog — Content marketing blog
  • /research — Research papers and studies
  • /pricing — Pricing and plans
  • /about — Company information

Authenticated Routes (app/(dashboard)/)

  • /dashboard — User home
  • /onboarding — Health questionnaire and lab orders
  • /consultation — Video call with expert
  • /recommendations — Personalized protocol suggestions
  • /resources — Educational content

API Routes (app/api/)

  • /api/enrollment — Enrollment form submission
  • /api/consultation/schedule — Book consultation slots
  • /api/consultation/token — Generate Stream.io tokens
  • /api/content — CMS content fetching

Key Components

Enrollment Flow (app/(enrollment)/)

  • Multi-step health questionnaire
  • Lab order placement (Rupa Health integration)
  • Payment collection (Stripe)
  • Consultation scheduling

Video Consultation (app/(dashboard)/consultation/)

  • Stream.io video integration
  • Screen sharing and annotations
  • Chat and file sharing
  • Recording and transcription

Content Rendering (components/content/)

  • Dynamic page rendering from Payload CMS
  • SEO metadata injection
  • Rich text formatting
  • Image optimization

Key Features

Marketing Features

  • SEO Optimization: Dynamic meta tags, sitemaps, schema markup
  • Content Management: Pages pulled from Payload CMS
  • Lead Capture: Email signup, consultation booking, contact forms
  • A/B Testing: Experiment framework for conversion optimization
  • Analytics: Google Analytics, Meta Pixel, conversion tracking

Dashboard Features

  • Onboarding Wizard: Step-by-step health assessment and lab ordering
  • Video Consultations: HD video calls with Loop experts via Stream.io
  • Protocol Builder: Interactive tool for creating personalized protocols
  • Resource Library: Educational videos, guides, research papers
  • Progress Tracking: Onboarding checklist and milestone celebrations

Stream.io Integration

  • Video Calls: 1-on-1 expert consultations
  • Screen Sharing: Share lab results and protocol plans
  • Chat: In-call messaging and file transfer
  • Recording: Consultation recordings for review
  • Notifications: Call reminders and follow-up scheduling

Tech Stack

  • Framework: Next.js 15 (App Router)
  • Database: Supabase PostgreSQL (read-only access to health.*)
  • Auth: Clerk SSO
  • Video: Stream.io Video SDK
  • CMS: Payload CMS (read-only API)
  • Forms: React Hook Form + Zod validation
  • Styling: Tailwind CSS + shadcn/ui components
  • Analytics: Google Analytics 4, Meta Pixel

Package Dependencies

Development

Local Setup

# Install dependencies
pnpm install
 
# Set environment variables
cp apps/loop-health/.env.example apps/loop-health/.env.local
 
# Run development server
pnpm --filter @loop/loop-health dev
 
# Access app at http://localhost:3001

Required Environment Variables

# Database
SUPABASE_URL=https://okjpxbiipeghfhwksoit.supabase.co
SUPABASE_ANON_KEY=eyJhbGc...
 
# Clerk Auth
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...
 
# Stream.io
NEXT_PUBLIC_STREAM_API_KEY=...
STREAM_SECRET_KEY=...
 
# CMS (Payload API)
PAYLOAD_API_URL=https://admin.loop.health/api/payload
PAYLOAD_API_KEY=...
 
# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
 
# Analytics
NEXT_PUBLIC_GA_TRACKING_ID=G-...
NEXT_PUBLIC_META_PIXEL_ID=...

Commands

pnpm dev          # Start dev server (port 3001)
pnpm build        # Production build
pnpm start        # Start production server
pnpm typecheck    # Type check
pnpm lint         # Lint code
pnpm analyze      # Bundle size analysis

Deployment

  • Platform: Vercel
  • Environments:
    • Production: main branch → loop.health
    • Staging: staging branch → staging-loop.health
    • Development: develop branch → dev-loop.health
  • Database: Read-only Supabase access (no writes)
  • CDN: Vercel Edge Network with global caching
  • Auto-Deploy: Push to branch triggers deployment

Performance Optimization

  • Image optimization via Next.js Image component
  • Static generation for marketing pages
  • Edge caching for API routes
  • Lazy loading for video components
  • Code splitting by route

See Also

@loop/my-loop-health@loop/loop-health-mobile