Specification for a standalone public-facing web app simulating the developer onboarding experience for clinics wishing to access the KareKonnect Grow API. Built in Base44. Deployed at a dedicated subdomain.
Purpose: A public-facing, single-page web app that demonstrates the API sign-up and developer onboarding experience for KareKonnect Grow. No real API keys are generated. The app simulates the workflow a clinic developer would follow to gain API access — including Clinic ID validation (which always returns "not recognised" in the demo environment, intentionally).
All sections appear on one scrollable page. Anchor links in the navbar jump to each section. No routing needed.
Navbar
Sticky top bar — Vård Health logo, product name, nav links, "Request Access" CTA
Hero Section
Dark gradient. Headline, subline, two CTAs: [Get API Access] → scrolls to form, [Explore Docs] → scrolls to API reference
Value Pillars
3 icon cards: Real-time Booking Data · Consented Patient Sync · Campaign ROI Reporting
API Reference (Embedded)
Full DeveloperApiDemo component (Quick Start, Auth, Patients, Bookings, Webhooks, JS SDK) — collapsed by default
Sign-Up Form
Request API Access — all fields, Clinic ID validation, amber warning, success banner on submit
Footer
Standard Vård Health footer — company info, links, legal, registered address
PRODUCT BADGE: KareKonnect Grow · API v1 · api.grow.vardhealth.com ●
Connect your clinic's booking data, patient consent lists, and campaign performance to any system. CRMs, data warehouses, custom dashboards, or your own app — live in under 5 minutes.
Real-time Booking Data
Live appointment, revenue, and attribution data via REST. Filter by location, clinician, speciality, or date range.
Consented Patient Sync
GDPR-compliant patient lists with consent timestamps. Sync directly to your CRM or data warehouse.
Campaign ROI Reporting
Connect ad spend to booked appointments automatically. Google Ads, Meta, and more — attributed to the appointment.
Embed the existing DeveloperApiDemo component exactly as-is:
import DeveloperApiDemo from '@/components/karekonnect/DeveloperApiDemo'; // Renders full tabbed API reference: // Quick Start · Authentication · Patient List · Bookings · Webhooks · JS SDK <DeveloperApiDemo />
Implementation note
The component renders collapsed by default. The "NOT FOR PRODUCTION" footer badge should remain visible — this is correct for the demo context.
Section heading:
"Request API Access"
Subheading: "Complete the form below. Your Clinic ID is required to validate your account. Contact your Vård Account Manager if you don't have one."
Placeholder: e.g. Sipho Dlamini
Placeholder: work email preferred
Placeholder: e.g. CTO, Practice Manager, Developer
Placeholder: e.g. Cape EV Centre
Placeholder: e.g. prc_01ZA_CPT_EYE
⚠️ Validation: on blur → always shows amber warning: 'Clinic ID not recognised. Please contact your Vård Account Contact for assistance, or email api@vardhealth.com'. Non-blocking — user can still submit.
Placeholder: Brief description of your integration purpose
Links to /api-terms (placeholder page is fine)
Trigger
Fires onBlur when user leaves the Clinic ID field, AND again on form submit.
Displayed message (always)
⚠️ "Clinic ID not recognised. Please contact your Vård Account Contact for assistance, or email api@vardhealth.com"
Visual treatment
border-amber-400)Submit behaviour
Success banner (full width, shown after submit)
✅ "Your request has been received. A member of the Vård team will be in touch within 1 business day to complete your API onboarding."
{
"name": "GrowApiRequest",
"type": "object",
"properties": {
"fullName": { "type": "string", "description": "Applicant full name" },
"email": { "type": "string", "format": "email" },
"jobTitle": { "type": "string", "description": "e.g. CTO, Developer, Practice Manager" },
"clinicName": { "type": "string", "description": "Clinic or organisation name" },
"clinicId": { "type": "string", "description": "Attempted Clinic ID (always unrecognised in demo)" },
"intendedUse": { "type": "string", "description": "What the developer plans to build" },
"submittedAt": { "type": "string", "format": "date-time" }
},
"required": ["fullName", "email", "clinicName", "intendedUse"],
"rls": {
"create": true,
"read": { "user_condition": { "role": "admin" } },
"write": { "user_condition": { "role": "admin" } }
}
}Admin can view all submissions in the Base44 backoffice via the GrowApiRequest entity — no custom admin UI needed.
Colours
#030712#111827#4ade80#1d3a78#f59e0b#ffffffTypography & Components
Create new Base44 app
Name: "KareKonnect Grow API Portal". Public app (no login required).
Create GrowApiRequest entity
Use the JSON schema from Section 9. Set RLS: create=true, read/write=admin.
Copy DeveloperApiDemo component
From VardHealth codebase. No modifications needed.
Copy AppFooter component
From VardHealth codebase. Update links to use external href.
Build GrowApiPortal page
Single page with all 6 sections. Wire form to GrowApiRequest.create().
Implement Clinic ID validation
onBlur → set clinicIdWarning=true. Amber border + message. Non-blocking.
Test & screenshot
Test each form state. Take screenshots per the LinkedIn carousel order.