Medknow

Inspiration

In Cameroon, as in much of Africa, access to reliable medical information is a real challenge. In rural and even urban areas, patients often receive medications without clear instructions, or in a language they don't fully understand. Leaflets are long, technical, and sometimes only available in English or medical French.

As a Cameroonian student, I have personally witnessed situations where relatives took their medications incorrectly because they didn't understand the dosage, or mixed dangerous treatments due to a lack of information. This observation gave birth to MedKnow: a simple, accessible, and multilingual solution that allows anyone to understand their medications from a simple photo.

What it does

MedKnow is a Progressive Web App (PWA) that analyzes a photo of a medication box or leaflet and returns clear, understandable information:

• What the medication is (active ingredient, therapeutic class)
• What it is used for (main indications)
• How to take it (dosage, time of day)
• Key warnings (contraindications, side effects)
• Dangerous interactions (with other medications or food)

The app works offline for saved analyses and can be installed on a phone like a native app. It is powered by AI (Google Gemini), with a deterministic mock mode for testing.

MedKnow is not a medical diagnosis tool. It is an information and awareness tool that systematically includes warnings and refers users to a healthcare professional.

How we built it

The project was built with a modern and robust stack:

• Frontend: Next.js 14 (App Router) + React 18 + strict TypeScript
• Styling: Tailwind CSS + Radix UI + Lucide Icons
• Validation: Zod (runtime schemas for the API and environment variables)
• AI: Multi-provider abstraction (Gemini by default, OpenAI as fallback) with retry, automatic fallback, and rate limiting
• PWA: Service Worker, Web App Manifest, offline mode
• Browser APIs: Camera (getUserMedia), Canvas (image preprocessing), Web Speech API (audio read-aloud of results)
• Testing: Vitest + happy-dom
• Deployment: Multi-stage Docker (Node 20 Alpine, non-root user), Docker Compose, ready for render

I also placed a strong emphasis on security: Content-Security-Policy, HSTS, server-side only API keys, per-IP rate limiting, and application-level safety filters (no diagnosis, identity redaction).

Challenges we ran into

1. Secure API key management: I had to build a server-side abstraction to never expose keys to the client, with an automatic fallback system for 429/5xx errors.
2. Offline mode: Making the app usable without an Internet connection was crucial for the African context, where networks are sometimes unstable. I used a Service Worker and a smart caching system.
3. AI accuracy: Analyzing a photo of a medication box is complex (reflections, multiple languages, small text). I had to add client-side image preprocessing (crop, scale) to improve results.
4. Compliance with medical rules: It was imperative that the app never gives a diagnosis. I implemented strict safety filters and standardized disclaimers.

Accomplishments that we're proud of

• Creating an app that is genuinely useful for my country and my continent.
• Successfully integrating multiple AI providers with a robust fallback system.
• Making the app installable and usable offline, which is essential in Africa.
• Following security best practices from the start (CSP, HSTS, server-side keys).
• Documenting the project professionally (complete README, scripts, Docker).

What we learned

• The importance of security: never expose an API key, always validate inputs with Zod, and think about denial-of-service attacks (rate limiting).
• The power of PWAs: they offer a near-native experience without the constraints of app stores.
• The complexity of AI in production: handling timeouts, errors, fallbacks, and model accuracy is a real engineering challenge.
• The social impact of tech: a project like MedKnow can genuinely improve people's lives, especially in contexts where medical information is hard to access.

What's next for MedKnow

• Add other local languages (Pidgin, Douala, Ewondo) to reach more Cameroonians.
• Integrate a local database of common medications in Cameroon to improve accuracy.
• Add a voice mode for users who cannot read.
• Work with pharmacists and healthcare professionals to validate the information.
• Deploy the app in partner pharmacies and health centers.
• Add a medication reminder system.

Built With

• canvas-api
• docker
• docker-compose
• eslint
• getusermedia
• google-gemini
• next.js
• node.js
• openai
• postcss
• prettier
• pwa
• radix-ui
• react
• render
• service-worker
• sharp
• tailwind-css
• typescript
• vitest
• web-speech-api
• zod