Clinica

Hero Section
Sign-In
Appointments Tab
Settings (Archive + Accessibility)
Clinic Sign-Up
Clinic Dashboard
Doctor Dashboard

https://github.com/Adityasharma0101911/Clinica-Frontend

Inspiration

( 9/10 ) patients leave the doctor’s office without fully understanding or remembering what to do next.

Doctor visits are short, stressful, and packed with information. Patients walk in nervous, forget the questions they meant to ask, hear medical terms they do not fully understand, and leave with instructions they are expected to remember perfectly.

For caregivers, chronic patients, immigrants, and anyone navigating healthcare alone, that gap can become dangerous.

Clinica was inspired by a simple idea:

$$ \text{Healthcare access} \neq \text{Healthcare understanding} $$

Getting into the appointment is only one part of care. Real access means understanding what happened, remembering what matters, and knowing what to do next.

Clinica gives every patient the kind of support someone might get if they had a doctor in the family: calm preparation, real-time clarity, and a plain-English record afterward.

What it does

Clinica is an AI health companion that wraps around the full doctor visit journey:

$$ \textbf{Prep} + \textbf{Listen} + \textbf{Understand} = \textbf{Clarity} $$

1. Prep: before the visit

Patients describe symptoms naturally, the way they would text a friend. Clinica then:

Translates casual symptoms into doctor-friendly clinical language
Detects possible red flags
Generates five prioritized questions
Helps patients arrive prepared instead of overwhelmed

2. Listen: during the visit

Clinica listens with consent and provides real-time support:

Live Deepgram transcription
Medical jargon highlighting
Plain-English explanations
Question checklist support during the appointment

3. Understand: after the visit

Clinica turns the visit into something patients can actually use:

A clean visit summary
Action items and next steps
Red flag warnings
Lab result explanations
A personal visit archive

Clinica also includes a clinic and doctor side, where clinics can register supported locations, add doctors, manage availability, and let patients book appointments with the right care team.

How we built it

We built Clinica as a full-stack web application with a polished patient experience and real backend infrastructure.

Layer	Technology
Frontend	Next.js, React, MUI, Tailwind
Animation	GSAP
Auth	Clerk
State	Zustand
AI	IBM watsonx.ai + Featherless AI
Transcription	Deepgram
Database	IBM Cloudant
Scheduling	Google Calendar integration
Deployment	Vercel

All AI calls happen through server-side API routes, so private keys never reach the browser.

The app has multiple connected systems:

$$ \text{Patient App} \rightarrow \text{AI APIs} \rightarrow \text{Cloudant Records} $$

$$ \text{Clinic Dashboard} \rightarrow \text{Doctors} \rightarrow \text{Appointments} $$

Clinica uses Cloudant to store visits, clinic profiles, doctors, appointments, summaries, action items, lab results, and patient-owned health history.

Challenges we ran into

One of the biggest challenges was making AI output reliable.

Medical workflows cannot break because a model returns malformed JSON, partial data, or an unexpected response. We added parsing, normalization, and fallback logic so Clinica can still return useful results when the AI response is imperfect.

Real-time transcription was also challenging. Browser audio, WebSockets, and recording states can behave unpredictably, especially when users stop recording normally but the browser reports unusual close codes.

Another challenge was designing three different account flows:

Patients use Clerk
Clinic admins use Clerk
Doctors use clinic-created credentials

Keeping those separate while still connecting everything through Cloudant took careful routing and data modeling.

Accomplishments that we're proud of

We are proud that Clinica feels like a real product, not just a hackathon demo.

It includes:

A full Prep, Listen, Understand patient journey
AI symptom articulation
AI question generation
Real-time transcription
Visit summaries
Lab decoding
Cloudant persistence
Appointment booking
Clinic onboarding
Doctor dashboards
A polished, calm, accessible interface

The biggest accomplishment is the product structure itself:

$$ \text{Before the visit} \rightarrow \text{During the visit} \rightarrow \text{After the visit} $$

Most health tools solve only one moment. Clinica supports the entire journey.

We are also proud of the design. Clinica is intentionally warm, human, and calm. It avoids feeling like a cold medical portal and instead feels like a companion sitting beside the patient.

What we learned

We learned that healthcare software needs more than intelligence. It needs trust, clarity, and graceful failure.

AI in healthcare cannot just be impressive. It has to be:

$$ \text{Helpful} + \text{Understandable} + \text{Reliable} $$

We also learned the importance of separating identity from application data. Clerk manages who someone is, while Cloudant stores what matters inside Clinica: clinic profiles, doctors, appointments, visits, summaries, and patient records.

On the technical side, we learned a lot about:

Real-time browser audio
Deepgram WebSocket transcription
AI response validation
Cloudant document modeling
Clerk authentication flows
Clinic and doctor workflow design
Patient-centered UX

Most importantly, we learned that small details matter. A confusing login path, missing clinic phone number, or unclear medical term can quickly break user trust.