CareHub

CareHub

Executive Dashboard

Last checked: 10:21:00 PM

Technology Stack

Last updated: 10/20/2018

Technology Stack

Overview

This document details the technology stack for CareHub, including frameworks, libraries, and services used across the platform.

Status Legend:

  • ✅ IMPLEMENTED - In use in codebase
  • 🚧 PARTIAL - Partially implemented
  • 📋 PLANNED - In specification, not yet built

Core Framework ✅ IMPLEMENTED

Next.js 16 (App Router)

Version: 16.1.1

Why Next.js:

  • Server-side rendering for SEO and performance
  • API routes for backend logic
  • File-based routing with App Router
  • React Server Components
  • Excellent TypeScript support
  • Large ecosystem

Configuration:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.blob.core.windows.net',
      },
    ],
  },
};

TypeScript ✅ IMPLEMENTED

Version: ^5

Configuration:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "paths": { "@/*": ["./src/*"] }
  }
}

Database ✅ IMPLEMENTED

PostgreSQL 16 via Prisma ORM

Prisma Version: ^6.19.1

Why PostgreSQL:

  • Robust, enterprise-grade
  • Excellent JSON support
  • Full-text search
  • Azure Flexible Server available

Why Prisma:

  • Type-safe database queries
  • Auto-generated TypeScript types
  • Migration management
  • Visual database browser (Prisma Studio)

Commands:

npm run db:migrate     # Run migrations
npm run db:push        # Push schema changes
npm run db:studio      # Open Prisma Studio
npm run db:generate    # Generate Prisma Client
npm run db:seed        # Run seed script

UI Components ✅ IMPLEMENTED

shadcn/ui + Tailwind CSS 4

Tailwind Version: ^4

Radix UI Primitives (via shadcn):

  • @radix-ui/react-alert-dialog
  • @radix-ui/react-avatar
  • @radix-ui/react-checkbox
  • @radix-ui/react-collapsible
  • @radix-ui/react-dialog
  • @radix-ui/react-dropdown-menu
  • @radix-ui/react-label
  • @radix-ui/react-navigation-menu
  • @radix-ui/react-popover
  • @radix-ui/react-progress
  • @radix-ui/react-radio-group
  • @radix-ui/react-scroll-area
  • @radix-ui/react-select
  • @radix-ui/react-separator
  • @radix-ui/react-slider
  • @radix-ui/react-slot
  • @radix-ui/react-switch
  • @radix-ui/react-tabs
  • @radix-ui/react-tooltip

Supporting Libraries:

  • class-variance-authority - Variant styling
  • clsx - Conditional classNames
  • tailwind-merge - Merge Tailwind classes
  • lucide-react - Icons
  • sonner - Toast notifications

Theme Support ✅ IMPLEMENTED

Package: next-themes ^0.4.6

Provides dark mode support across all portals.

Calendar & Scheduling ✅ IMPLEMENTED

FullCalendar

Version: ^6.1.20

Packages:

  • @fullcalendar/core
  • @fullcalendar/react
  • @fullcalendar/daygrid - Month view
  • @fullcalendar/timegrid - Week/day time slots
  • @fullcalendar/interaction - Drag and drop

Use Cases:

  • Provider calendar (Psych/LPCC portals)
  • Session scheduling
  • Time block management
  • Availability visualization

Date Utilities ✅ IMPLEMENTED

  • date-fns ^4.1.0 - Date manipulation
  • date-fns-tz ^3.2.0 - Timezone handling
  • react-day-picker ^9.13.0 - Date picker component

Authentication ✅ IMPLEMENTED

NextAuth.js

Version: ^4.24.13

Adapter: @next-auth/prisma-adapter ^1.0.7

Configuration:

// lib/auth.ts
import NextAuth from "next-auth";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import AzureADProvider from "next-auth/providers/azure-ad";

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    AzureADProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
      tenantId: process.env.AZURE_AD_TENANT_ID,
    }),
  ],
  callbacks: {
    async session({ session, user }) {
      session.user.id = user.id;
      session.user.role = user.role;
      return session;
    },
  },
};

Clerk (Alternative) 🚧 PARTIAL

Version: @clerk/nextjs ^6.36.5

Available as an alternative authentication provider for member portal.

Forms & Validation ✅ IMPLEMENTED

React Hook Form + Zod

Versions:

  • react-hook-form ^7.69.0
  • zod ^4.2.1
  • @hookform/resolvers ^5.2.2

Example:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  clinicalRationale: z.string().min(50, 'Minimum 50 characters required'),
  additionalSessions: z.number().min(1).max(20),
});

const form = useForm({
  resolver: zodResolver(schema),
});

Workflow Engine ✅ IMPLEMENTED

Inngest

Version: ^3.48.1

Why Inngest:

  • Event-driven architecture
  • Durable functions with automatic retries
  • Step functions for long-running workflows
  • Sleep/wait capabilities
  • Built-in monitoring

Commands:

npm run inngest:dev    # Start Inngest dev server

Example:

import { inngest } from "@/inngest/client";

export const myWorkflow = inngest.createFunction(
  { id: "my-workflow", retries: 3 },
  { event: "carehub/my.event" },
  async ({ event, step }) => {
    await step.run("step-1", async () => {
      // Do work
    });

    await step.sleep("wait", "1h");

    await step.run("step-2", async () => {
      // Continue after 1 hour
    });
  }
);

Video Sessions ✅ IMPLEMENTED

Twilio Video

Packages:

  • twilio ^5.11.1 - Server SDK
  • twilio-video ^2.33.0 - Client SDK

Features:

  • Real-time video sessions
  • Recording support
  • Room status webhooks
  • Participant tracking

Integration:

// Server: Create video room
import Twilio from "twilio";

const client = Twilio(accountSid, authToken);

const room = await client.video.v1.rooms.create({
  uniqueName: `carehub-session-${sessionId}`,
  type: "group",
  recordParticipantsOnConnect: true,
  statusCallback: `${baseUrl}/api/webhooks/twilio/room-status`,
});

// Client: Connect to room
import Video from "twilio-video";

const room = await Video.connect(token, {
  name: roomName,
  audio: true,
  video: { width: 640 },
});

AI Integration ✅ IMPLEMENTED

OpenAI SDK

Version: ^4.104.0

Use Cases:

  • Intake form analysis
  • Session summarization
  • Care plan suggestions
  • Risk assessment

Integration:

import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.AZURE_OPENAI_API_KEY,
  baseURL: process.env.AZURE_OPENAI_ENDPOINT,
  defaultQuery: { "api-version": "2024-02-01" },
  defaultHeaders: { "api-key": process.env.AZURE_OPENAI_API_KEY },
});

const response = await openai.chat.completions.create({
  model: process.env.AZURE_OPENAI_DEPLOYMENT,
  messages: [
    { role: "system", content: systemPrompt },
    { role: "user", content: userPrompt },
  ],
  response_format: { type: "json_object" },
});

Azure Speech Services ✅ IMPLEMENTED

Use for: Session transcription

Integration: Custom lib at src/lib/azure-speech.ts

Azure Services ✅ IMPLEMENTED

Azure SDK Packages

Package Version Use Case
@azure/identity ^4.13.0 Managed Identity authentication
@azure/keyvault-secrets ^4.10.0 Secret management
@azure/storage-blob ^12.29.1 PHI document storage

Azure Monitoring ✅ IMPLEMENTED

Package Version Use Case
@azure/monitor-opentelemetry ^1.14.2 OpenTelemetry integration
applicationinsights ^3.12.1 Application Insights SDK

Communication ✅ IMPLEMENTED

SMS

Package: twilio ^5.11.1

Used for:

  • Session reminders
  • Intake form links
  • Notification fallback

Email

Package: @sendgrid/mail ^8.1.6

Used for:

  • Session reminders (primary)
  • System notifications
  • Password reset

GitHub Integration ✅ IMPLEMENTED

Octokit

Package: @octokit/rest ^22.0.1

Use Case: Feedback system - creates GitHub issues from user feedback

import { Octokit } from "@octokit/rest";

const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });

await octokit.issues.create({
  owner: process.env.GITHUB_OWNER,
  repo: process.env.GITHUB_REPO,
  title: `[Feedback] ${summary}`,
  body: issueBody,
  labels: ["feedback", priorityLabel, portalLabel],
});

Screenshot Capture ✅ IMPLEMENTED

Package: html-to-image ^1.11.13

Used to capture screenshots in feedback submissions.

Testing ✅ IMPLEMENTED

Playwright (E2E)

Version: ^1.57.0

Commands:

npm run test:e2e        # Run E2E tests
npm run test:e2e:ui     # Run with UI mode
npm run test:e2e:report # Show test report

Projects:

  • chromium - Main browser
  • screenshots-phase-* - Demo screenshot capture

Jest (Unit) 📋 PLANNED

Unit testing framework - not yet configured.

Development Tools

Scripts

{
  "dev": "next dev",
  "build": "prisma generate && next build",
  "start": "next start",
  "lint": "eslint",
  "db:migrate": "prisma migrate dev",
  "db:push": "prisma db push",
  "db:studio": "prisma studio",
  "db:generate": "prisma generate",
  "db:seed": "prisma db seed",
  "inngest:dev": "npx inngest-cli@latest dev",
  "test:e2e": "playwright test",
  "slides:dev": "npx reveal-md docs/demo-slides --watch"
}

Dev Dependencies

Package Version Purpose
@playwright/test ^1.57.0 E2E testing
@tailwindcss/postcss ^4 PostCSS plugin
eslint ^9 Linting
eslint-config-next 16.1.1 Next.js ESLint config
tsx ^4.21.0 TypeScript execution
tw-animate-css ^1.4.0 Animation utilities
dotenv ^17.2.3 Environment variables

Dependency Summary

Core

Dependency Version Status
Next.js 16.1.1 ✅
React 19.2.3 ✅
TypeScript ^5 ✅
Prisma ^6.19.1 ✅

UI

Dependency Version Status
Tailwind CSS ^4 ✅
Radix UI Various ✅
Lucide React ^0.562.0 ✅
FullCalendar ^6.1.20 ✅
Sonner ^2.0.7 ✅

Backend

Dependency Version Status
Inngest ^3.48.1 ✅
NextAuth ^4.24.13 ✅
Zod ^4.2.1 ✅

External Services

Dependency Version Status
Twilio ^5.11.1 ✅
Twilio Video ^2.33.0 ✅
SendGrid ^8.1.6 ✅
OpenAI ^4.104.0 ✅
Octokit ^22.0.1 ✅

Azure

Dependency Version Status
@azure/identity ^4.13.0 ✅
@azure/keyvault-secrets ^4.10.0 ✅
@azure/storage-blob ^12.29.1 ✅
applicationinsights ^3.12.1 ✅

Project Structure

app/carehub-web/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── admin/              # Admin portal
│   │   ├── psych/              # Psych portal
│   │   ├── lpcc/               # LPCC portal
│   │   ├── member/             # Member portal
│   │   ├── intake/             # Intake form
│   │   └── api/                # API routes
│   ├── components/
│   │   ├── ui/                 # shadcn/ui components
│   │   ├── north-star/         # Workflow UI components
│   │   ├── calendar/           # Calendar components
│   │   ├── billing/            # Billing components
│   │   ├── video/              # Video session components
│   │   └── feedback/           # Feedback system
│   ├── lib/
│   │   ├── prisma.ts           # Prisma client
│   │   ├── auth.ts             # Authentication
│   │   ├── ai.ts               # AI integration
│   │   ├── twilio.ts           # Twilio (SMS + Video)
│   │   ├── email.ts            # SendGrid
│   │   ├── azure-speech.ts     # Speech transcription
│   │   ├── storage.ts          # Blob storage
│   │   └── workflow-config.ts  # Workflow configuration
│   ├── inngest/
│   │   ├── client.ts           # Inngest client & events
│   │   └── functions/          # Workflow functions
│   ├── hooks/                  # Custom React hooks
│   └── types/                  # TypeScript types
├── prisma/
│   ├── schema.prisma           # Database schema
│   ├── migrations/             # Database migrations
│   └── seed*.ts                # Seed scripts
├── e2e/                        # Playwright tests
└── public/                     # Static assets

Environment Variables

# Database
DATABASE_URL=postgresql://...

# Authentication
NEXTAUTH_SECRET=...
NEXTAUTH_URL=https://app.carehub.com
AZURE_AD_CLIENT_ID=...
AZURE_AD_CLIENT_SECRET=...
AZURE_AD_TENANT_ID=...

# Azure Services
AZURE_CLIENT_ID=... (Managed Identity)
AZURE_KEY_VAULT_URI=https://kv-carehub-dev.vault.azure.net
AZURE_STORAGE_ACCOUNT_NAME=stcarehubdev...

# AI Services
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_ENDPOINT=https://oai-carehub-dev.openai.azure.com
AZURE_OPENAI_DEPLOYMENT=gpt-4o
AZURE_SPEECH_KEY=...
AZURE_SPEECH_REGION=eastus2

# Communication
TWILIO_ACCOUNT_SID=...
TWILIO_AUTH_TOKEN=...
TWILIO_PHONE_NUMBER=+1...
TWILIO_API_KEY_SID=...
TWILIO_API_KEY_SECRET=...
SENDGRID_API_KEY=...

# GitHub (Feedback)
GITHUB_TOKEN=...
GITHUB_OWNER=cht-brianwcline
GITHUB_REPO=carehub-therapy

# Monitoring
APPLICATIONINSIGHTS_CONNECTION_STRING=...

VS Code Extensions (Recommended)

  • ESLint
  • Prettier
  • Prisma
  • Tailwind CSS IntelliSense
  • TypeScript Importer
  • GitLens
  • GitHub Copilot
← Back to all documents