Inspiration

Healthcare literacy is a silent crisis. Millions of patients leave their doctor's office holding a prescription they don't fully understand written in medical jargon, with no clear guidance on what to actually do each day. This problem is even more acute in multilingual communities, where language barriers compound the confusion. A patient who doesn't understand their treatment is a patient who won't follow it.

We built ClearCare because we believe a prescription shouldn't be the end of the conversation it should be the beginning of a clear, personalized action plan.

What it does

ClearCare is a mobile-first web app that bridges the gap between doctor and patient. Here's how it works:

Doctors write prescriptions in plain medical language, select the patient's preferred language, and hit generate. AI instantly transforms the clinical text into a structured daily action plan. Patients log in to see their condition explained in simple terms, a morning and evening routine of actions, warnings to watch for, and signs that they should seek help all in their own language (English, French, or Arabic with full RTL support). A built-in AI health assistant (powered by Groq) answers patient questions about their treatment in real time, in their chosen language. Text-to-speech reads out any section of the plan aloud, making the app accessible to patients with low literacy or visual impairments. An accessibility mode enlarges text for easier reading. How we built it Backend: Django 4.2 + Django REST Framework with JWT authentication (SimpleJWT). Custom User model with role-based access (doctor/patient). SQLite for the database. Frontend: React 18 SPA with React Router 6, Axios, and fully inline styles for a zero-dependency UI. No CSS framework every pixel is intentional. AI: Groq API (llama-3.1-8b-instant) for both prescription plan generation and the medical chat assistant. Prompts are language-aware the model is instructed to write all output in the patient's language. i18n: Custom LanguageContext with translations for EN/FR/AR, RTL layout switching via document.documentElement.dir, and dynamic re-fetching of AI-generated content when the patient switches language. TTS: Web Speech API (SpeechSynthesis) with emoji stripping and language-matched voice selection. Challenges we ran into State race condition in React: When the doctor hit "Send," the app read savedId from React state immediately after setting it but state updates are asynchronous. The prescription was being created but never sent. We fixed this by chaining the create and send calls using a local variable instead of relying on state. AI output consistency: Getting the LLM to return strict, parseable JSON every time required careful prompt engineering explicit key names, no markdown, enforced language, and post-processing to strip code fences before parsing. Live translation of stored content: Prescription content is generated and stored in the DB at creation time. When a patient switches language, the stored text doesn't change. We solved this by detecting language mismatches on the patient prescription endpoint and re-generating the content via Groq on demand, then persisting the new language version. Arabic RTL support: Mixing LTR and RTL content (e.g., Arabic UI with English doctor names) required careful use of marginInlineEnd over marginRight and document.documentElement.dir switching at the root level. Accomplishments that we're proud of A doctor can write a clinical prescription and a patient receives a fully translated, structured daily action plan in under 10 seconds. Full trilingual support the entire UI, AI-generated content, and chat responses all switch seamlessly between English, French, and Arabic. The app works end-to-end with zero static/demo data every patient, prescription, and plan is real and doctor-created. Accessibility-first design: large text mode, listen buttons on every section, and a "Listen All" feature that reads morning or evening actions aloud without reading emoji characters.

What we learned

Prompt engineering is a product skill, not just a technical one. The difference between a prompt that returns consistent JSON and one that doesn't is often one well-placed sentence. Building for multilingual audiences from day one forces cleaner architecture. Every string lives in one place, every AI call carries a language parameter. The patient experience and the doctor experience are fundamentally different UX problems. Designing both in the same app taught us to think in roles, not screens.

What's next for ClearCare

Push notifications remind patients when it's time for their morning or evening actions. Medication refill tracking alert the doctor when a patient's prescription is about to run out. Progress reporting let doctors see which patients are completing their daily action plans. Voice input for doctors dictate a prescription instead of typing it. Expanded language support .

Built With

• built-with-react-18
• django-4.2-+-django-rest-framework
• groq-api-(llama-3.1)
• jwt-authentication
• sqlite
• web-speech-api