A fresh BS Software Engineering graduate shares the full story of building a real-world health-tech web app — from idea to deployment.
The Moment That Started Everything
My uncle came home from the hospital with a 9-page medical report in his hands.
He sat at the dining table, reading it over and over. His face said everything — he understood nothing. Words like "bilateral pleural effusion" and "elevated creatinine levels" stared back at him. He was scared, confused, and had no idea whether his condition was serious or not.
That evening, I decided to build something. Not for a grade. Not for a professor. For him.
That is how MediSense was born — a smart web application that reads your medical report and explains it in plain, human language. No medical degree required.
What Is MediSense?
MediSense is a full-stack AI-powered web application that makes medical reports understandable for everyone. It is built for patients, families, and caregivers who receive complex medical documents and have no idea what they mean.
Here is what MediSense does:
Medical Report Summarizer — The core feature. A user uploads or pastes their medical report and the AI backend processes it and returns a clean, plain-language summary. Technical diagnoses become simple explanations.
AI Chatbot for Medical Terminology — After reading the summary, users can ask follow-up questions. "What does hypertension mean for my daily life?" or "Is a creatinine level of 2.1 dangerous?" The chatbot answers in plain language, not medical jargon.
Personal Medical Dashboard — Users have a secure dashboard where all their past reports and summaries are stored and accessible anytime. Think of it as a personal medical history — organised, searchable, and private.
Data Visualisation with Charts — MediSense converts key values from reports — blood pressure readings, glucose levels, lab trends — into clean visual charts so users can see patterns over time at a glance.
Secure Access with Supabase Authentication — The dashboard, charts, and chatbot are only accessible to verified users. Authentication is handled entirely through Supabase using email-based login, keeping sensitive medical data protected.
You can watch MediSense in action here: MediSense Video
The Tech Stack — And Why I Chose Each Tool
Every technology in MediSense was chosen deliberately, not randomly. Here is the reasoning behind each decision.
React — I chose React for the frontend because of its component-based architecture. Each feature of MediSense — the summariser, the chatbot, the dashboard, the charts — is an independent component. This made the codebase clean and manageable for a solo developer.
Tailwind CSS — Tailwind made building a responsive, professional UI significantly faster than writing custom CSS. The utility-class approach meant I spent time on functionality rather than styling battles.
Python (FastAPI) — The AI backend is built in Python because of its unmatched ecosystem for natural language processing. FastAPI specifically gave me fast, asynchronous API responses and automatic documentation — essential when the frontend needs to call the backend in real time.
Chart.js — I integrated Chart.js for visualisations because it connects cleanly with React and produces beautiful, readable charts with minimal configuration. Displaying lab values as line charts rather than raw numbers made a huge difference in how users understood their data.
Supabase — Supabase handled both authentication and the database. Instead of building my own auth system — which would have been a security risk for a medical app — Supabase gave me production-ready email authentication in hours, not days. All user data and report history is stored in the Supabase PostgreSQL database.
Vercel — The React frontend is deployed on Vercel. It connects directly to my GitHub repository and redeploys automatically on every push. Zero configuration, zero cost.
Railway — The Python FastAPI backend was deployed on Railway during development. It provided a clean, GitHub-connected deployment pipeline for the backend.
How MediSense Works — A Full Walkthrough
Let me walk you through the complete user journey inside MediSense.
Step 1 — Sign Up or Log In
A new user lands on the MediSense landing page and signs up with their email. Supabase handles the entire authentication flow — email confirmation, session management, and secure token storage. Once logged in, the user is redirected to their personal dashboard.
Setting up Supabase auth in React was straightforward. After installing the Supabase client, initialising it with your project URL and anon key, you can protect any route by checking the active session. If no session exists, the user is redirected to the login page automatically.
Step 2 — Upload a Medical Report
From the dashboard, the user uploads their report or pastes raw text into the input field. The frontend sends this content to the Python FastAPI backend via a POST request.
The API endpoint receives the report text, passes it through the NLP pipeline, and returns a structured JSON response containing the plain-language summary and a list of key medical terms detected in the document.
Step 3 — Read the Summary
The summary appears on screen in seconds. What was once a 9-page document full of medical terminology becomes 4 to 6 clear paragraphs in plain English. Each detected medical term is highlighted and clickable — clicking it opens the chatbot with that term pre-loaded as a question.
Step 4 — Ask the Chatbot
The chatbot panel sits alongside the summary. Users can type any medical question and receive a plain-language explanation immediately. The chatbot is context-aware — it knows which report the user is currently viewing and tailors its answers accordingly.
This feature was inspired directly by my uncle's situation. He did not need a textbook definition of pleural effusion. He needed to know whether he should be worried and what it meant for his daily life. The chatbot answers exactly that kind of question.
Step 5 — View Charts and Trends
If the report contains measurable values — blood pressure, glucose, cholesterol, kidney function markers — MediSense extracts them and renders them as Chart.js line or bar charts. Users who have uploaded multiple reports over time can see how their values have changed — a genuinely useful health tracking feature.
Step 6 — Dashboard History
Every report a user uploads is saved to their Supabase database and appears in their dashboard history. They can revisit any past report, re-read its summary, or download it. The dashboard is only accessible to authenticated users — unauthenticated requests are redirected to login automatically.
The Three Challenges That Nearly Broke Me
No real project goes smoothly. Here are the three moments where MediSense almost defeated me — and how I got through them.
Challenge 1 — Making the AI Accurate Enough for Medical Language
Medical language is unlike any other domain. The same term can mean completely different things depending on context. Early versions of the summariser were producing technically correct but dangerously oversimplified summaries.
My solution was to layer the NLP pipeline — first extracting medical entities, then running them through a domain-specific explanation model, then applying a post-processing step to ensure the output never made absolute diagnostic claims. Adding a clear disclaimer — "This summary is for understanding purposes only, not medical advice" — was also a non-negotiable decision.
Challenge 2 — Connecting React Frontend to Python Backend Across Domains
When I first deployed the React app on Vercel and the Python backend on Railway, every API call from the frontend was blocked by CORS errors. The browser refused to send requests from one domain to another without explicit permission.
The fix was adding CORS middleware to my FastAPI backend, specifying the Vercel frontend URL as an allowed origin. It sounds simple in hindsight, but it cost me almost a full day of debugging before I understood what was actually happening.
Challenge 3 — Protecting Routes Based on Authentication State
My initial implementation had a security gap — if a user knew the direct URL of the dashboard or charts page, they could access it without logging in. Supabase authentication was working, but route protection was not.
The solution was creating a protected route wrapper component in React that checks the Supabase session on every render. If the session is null, the component redirects to login before rendering anything. Every sensitive page — dashboard, charts, chatbot — is wrapped in this component.
{/* Protected routes — redirect to /signin if not logged in */}
<Route path="/dashboard" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />
<Route path="/report/:filename" element={
<ProtectedRoute>
<ReportDetail />
</ProtectedRoute>
} />
What I Learned Building MediSense
Here are the five most valuable lessons this project taught me — lessons no university lecture covered.
Supabase is genuinely production-ready. For any application handling sensitive user data, do not build your own authentication. Supabase gives you secure, scalable auth in hours. The time you save is better spent on your actual product.
A clear user story makes better technical decisions. Because I knew exactly who MediSense was for — my uncle, not a developer — every feature decision was grounded in real human need. That clarity made the product better and the development faster.
CORS errors are not scary, just misunderstood. Every fullstack developer hits CORS errors when connecting a frontend and backend on different domains. Understanding that CORS is a browser security feature — not a bug in your code — changes how you approach the fix entirely.
Deployment is part of the product. A working app that only runs on localhost is not a product. Learning Vercel, Railway, and Supabase deployments as part of the development process — not as an afterthought — made MediSense a real, shareable application.
Final year projects can be real products. MediSense started as a university FYP. But with a genuine problem, a thoughtful solution, and a complete tech stack, it became something I am proud to show any recruiter in the world.
What Is Next for MediSense
MediSense is not finished. Here is what I am building next:
Support for PDF and image-based report uploads using OCR, so users do not need to copy and paste text manually. Multi-language support so patients who do not read English fluently can receive summaries in Urdu or other languages. A doctor-sharing feature so users can share their simplified summary with a specialist before an appointment.
Try MediSense and Let Me Know What You Think
If you have made it this far — thank you for reading the full story.
MediSense was built by a fresh BS Software Engineering graduate and to solve a genuine problem. No research lab, no team, no budget — just React, Python, Supabase, and a lot of late nights.
Demo video: MediSense Video
GitHub: Repo
Note: The repository is currently private. If you are a recruiter or developer interested in the codebase, feel free to connect with me on LinkedIn and I will share access.
I would love to hear from you — have you ever built a health-tech or AI project? What was your biggest challenge? Drop it in the comments below.
Top comments (0)