Skip to Content
Applications@loop/admin

@loop/admin — Content Management System

Unified content management interface for all Loop brands, built on Payload CMS 3.75. Provides a modern admin dashboard for managing content, users, products, and clinical data across the Loop ecosystem.

Purpose

The admin app serves as the central hub for:

  • Content Management: Blog posts, pages, FAQs, testimonials, research papers, certificates of analysis
  • Product Catalog: Peptides, stacks, goals, and product relationships
  • User Administration: Staff accounts, roles, and permissions via Clerk SSO
  • Media Library: Centralized asset management with automatic image optimization
  • Clinical Data: Research papers, COAs, and compliance documentation

Replaces the original microservices architecture by consolidating content management into a single, maintainable application.

Architecture

Route Structure

  • / — Next.js landing page with admin dashboard
  • /cms — Payload CMS admin interface
  • /api/payload — Payload REST and GraphQL API
  • /api/health — Health check endpoint

Key Components

Dashboard (app/dashboard/)

  • Real-time metrics and system status
  • Quick actions for common tasks
  • Recent activity feed

Collections (payload/collections/)

  • Generic collections from @loop/cms (Users, Media, Pages, BlogPosts, FAQs, Testimonials, ResearchPapers, COAs)
  • Loop-specific collections (Peptides, Stacks, Goals)

Configuration (payload.config.ts)

  • Database connection (Supabase payload schema)
  • Clerk SSO integration
  • Collection registration
  • Plugin configuration (SEO, redirects, cloud storage)

Key Features

Content Management

  • Rich text editor with markdown support
  • Draft/publish workflow
  • SEO metadata management
  • Automatic sitemap generation
  • Redirect management

Product Management

  • Peptide catalog with dosing protocols
  • Stack builder with peptide relationships
  • Goal-based product recommendations
  • Inventory tracking integration

Access Control

  • Clerk SSO authentication
  • Role-based permissions (admin, staff, editor, support)
  • Per-collection access rules
  • Field-level permissions

Media Management

  • Drag-and-drop uploads
  • Automatic image optimization
  • Cloud storage integration (Vercel Blob)
  • CDN delivery

Developer Tools

  • GraphQL playground at /api/payload/graphql
  • REST API documentation
  • Type generation for collections
  • Database migrations

Tech Stack

  • Framework: Next.js 15 (App Router)
  • CMS: Payload CMS 3.75
  • Database: Supabase PostgreSQL (payload schema)
  • Auth: Clerk SSO with role-based access
  • Storage: Vercel Blob for media assets
  • Validation: Zod 3.x
  • Styling: Tailwind CSS

Package Dependencies

Development

Local Setup

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

Required Environment Variables

# Database
DATABASE_URL=postgresql://...
SUPABASE_URL=https://okjpxbiipeghfhwksoit.supabase.co
SUPABASE_SERVICE_KEY=eyJhbGc...
 
# Clerk SSO
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...
 
# Storage
BLOB_READ_WRITE_TOKEN=vercel_blob_...
 
# Payload
PAYLOAD_SECRET=your-secret-key

Seed Data

Import v2 peptide data and sample content:

pnpm --filter @loop/admin seed

Commands

pnpm dev              # Start dev server (port 3002)
pnpm build            # Production build
pnpm start            # Start production server
pnpm typecheck        # Type check
pnpm lint             # Lint code
pnpm payload migrate  # Run database migrations

Deployment

  • Platform: Vercel
  • Environments:
    • Production: main branch → admin.loop.health
    • Staging: staging branch → staging-admin.loop.health
    • Development: develop branch → dev-admin.loop.health
  • Database: Shared Supabase project with isolated payload schema
  • Auto-Deploy: Push to branch triggers deployment
  • Migrations: Automatically run on deployment via Payload CLI

Access Roles

Controlled via Clerk publicMetadata.adminRole:

  • admin — Full access to all collections and settings
  • staff — Edit access to content, read-only for settings
  • editor — Content creation and editing only
  • support — Read-only access to user data

Users without roles are denied access to the admin.

See Also

Overview@loop/my-loop-health