CitaBox is a Next.js 16 application. Before running it locally or deploying it to production, you need to configure one environment variable that tells the frontend where the CitaBox backend API is running. All other application configuration — authentication tokens, the active clinic, and theme preference — is handled automatically at runtime usingDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/FerchoSG/healthcare-web/llms.txt
Use this file to discover all available pages before exploring further.
localStorage.
Environment variables
CitaBox reads a single public environment variable at build time and runtime:NEXT_PUBLIC_API_URL must point to a running CitaBox backend instance. If the variable is not set, the frontend defaults to http://localhost:3001. This default works for local development but will cause all API calls to fail in a deployed environment where the backend runs on a different host.Runtime storage
CitaBox stores session and preference data in the browser’slocalStorage under the following keys. These are managed automatically by the application and do not require manual configuration.
| Key | Purpose |
|---|---|
access_token | JWT bearer token set after login. Cleared automatically on 401 responses. |
clinic_id | Active clinic ID sent as the x-clinic-id header on every authenticated API request. |
citabox-theme | UI theme preference. Accepts light, dark, or system. Defaults to system. |
Development server
Create your environment file
Copy the example below into a new
.env.local file in the project root and set NEXT_PUBLIC_API_URL to the URL of your local backend:Available scripts
| Script | Command | Description |
|---|---|---|
| Development server | pnpm dev | Starts Next.js in development mode with hot reload. |
| Production build | pnpm build | Compiles and optimizes the app for production. |
| Production server | pnpm start | Serves the production build locally. Run pnpm build first. |
| Lint | pnpm lint | Runs ESLint across the codebase. |
| End-to-end tests | pnpm test:e2e | Runs the Playwright test suite. |
| E2E with UI | pnpm test:e2e:ui | Opens the Playwright interactive UI runner. |
Deploying to Vercel
CitaBox includes@vercel/analytics and is designed to be deployed on Vercel. Analytics are enabled automatically when the app is deployed to the Vercel platform — no additional configuration is required.
Push your code to a Git repository
Vercel supports GitHub, GitLab, and Bitbucket. Make sure your repository contains the
package.json and the Next.js app directory structure.Create a new Vercel project
In the Vercel dashboard, click Add New → Project and import your repository. Vercel automatically detects the Next.js framework.
Set the environment variable
Under Environment Variables in the project settings, add:Apply this to the Production environment. Add a separate value pointing to a staging backend for Preview deployments if needed.
Production build locally
To test a production build outside of Vercel:http://localhost:3000 using the compiled output. Make sure NEXT_PUBLIC_API_URL is set in your environment before running pnpm build, because Next.js inlines NEXT_PUBLIC_* values at build time.