Introduction

Comdeall is a full-featured frontend built with Next.js 13+ (App Router).
It is a comprehensive platform for child development and therapy management, serving as the backbone for:

• Assessment Management
• Lesson Planning
• Appointment Scheduling
• Therapist Coordination

The platform powers both mobile and web applications, ensuring seamless collaboration and progress tracking.

With a component-driven design using TailwindCSS and ShadCN UI, Comdeall is:

• Fully responsive
• Fast and lightweight
• Optimized for SEO and performance

Key Technologies & Frameworks

Area	Tool / Library
Framework	Next.js 13+ (App Router)
Runtime	Node.js
Language	TypeScript
Styling	TailwindCSS + ShadCN UI + Radix UI Primitives
UI Animations	Framer Motion
Forms & Validation	React Hook Form + Zod
Auth	Firebase Auth + JWT (via Backend SDK)
State Management	React Context + useState (lightweight)
Docs & Flows	@react-pdf/renderer, react-doc-viewer, pdfjs-dist
Maps & Location	@react-google-maps/api
Charts & Visuals	Recharts, Vaul
Media Upload	S3 Presigned URLs (via Backend SDK)

🧰 Common Development Scripts

All commands are run from the monorepo root using npm workspaces.

# Start local dev server (apps/comdeall-admin)
npm run web:dev

# Start production server (after build)
npm run web:start

# Build production
npm run web:build

# Lint (run in admin workspace)
npm run lint --workspace=comdeall-admin

# Format with Prettier (example: admin app)
npx prettier -w apps/comdeall-admin

📦 Tooling & Features

• Codegen: GraphQL Code Generator via local codegen.ts and npm run gen
• UI Framework: Next.js + TailwindCSS + Radix + ShadCN UI
• State & Forms: React Hook Form, Zod
• GraphQL Client: Apollo Client (@apollo/client)
• Docs/Viewers: react-doc-viewer, docx-preview
• PDF/Print: react-to-pdf
• Advanced Inputs: react-quill, react-datepicker, react-day-picker, react-dropzone
• E2E Testing: Playwright configured at repo root

🔌 GraphQL Integration

• Uses Apollo Client with types and hooks generated by GraphQL Code Generator
• Run codegen before dev (it is also triggered by the dev script). Use the correct command based on where you run it from:

# From monorepo root
npm run gen --workspace=comdeall-admin

# From inside apps/comdeall-admin
npm run gen

📄 Environment Setup

Create an environment file in apps/comdeall-admin/ for each target:

Staging example (.env.staging)

GRAPHQL_SERVER_URI=https://staging-hasura.communicaids.com/v1/graphql
GRAPHQL_SERVER_SUBSCRIPTION_URI=wss://staging-hasura.communicaids.com/v1/graphql
GRAPHQL_ADMIN_SECRET_KEY=74686973697361746573747365637265746b6579

SIGNOUT_URL=https://staging-api.communicaids.com/api/auth/signout/admin
ONBOARD_THERAPIST_URL=https://staging-api.communicaids.com/api/user-management/therapist/onboard

PRIVATE_DOWNLOAD_URL=https://staging-api.communicaids.com/api/media/download/private
NEXT_PUBLIC_PUBLIC_UPLOAD_ENDPOINT=https://staging-api.communicaids.com/api/media/upload/public/
PUBLIC_UPLOAD_ENDPOINT=https://staging-api.communicaids.com/api/media/upload/public/
PRIVATE_UPLOAD_ENDPOINT=https://staging-api.communicaids.com/api/media/upload/private
GENEREATE_PDF_ENDPOINT=https://staging-api.communicaids.com/api/media/upload/generate-report

NEXT_PUBLIC_NOTIFICATION_DESCRIPTION_CHAR_LIMIT=500
NEXT_PUBLIC_REMEMBER_ME_KEY=admin_remember_me
NEXT_PUBLIC_REMEMBERED_EMAIL_KEY=admin_remembered_email

NEXT_PUBLIC_SCREENING_SAMPLE_CSV_URL="https://docs.google.com/spreadsheets/d/19EajLtlL-uQ4XcNbvMSppHdHi0iVDLRGSZb9Avyb-ng/edit?gid=910891247#gid=910891247"
NEXT_PUBLIC_CDDC_SAMPLE_CSV_URL="https://docs.google.com/spreadsheets/d/19EajLtlL-uQ4XcNbvMSppHdHi0iVDLRGSZb9Avyb-ng/edit?gid=954347801#gid=954347801"
NEXT_PUBLIC_LESSON_PLANS_CSV_URL="https://docs.google.com/spreadsheets/d/19EajLtlL-uQ4XcNbvMSppHdHi0iVDLRGSZb9Avyb-ng/edit?gid=241189077#gid=241189077"