Not a chatbot. A health brain that reads your reports, remembers your history, and explains everything in plain language.
India has 1.4 billion people and a significant gap between medical knowledge and patients. Lab reports arrive full of jargon, reference ranges are context-free, and most people have no easy way to understand what their own health data means.
Vaidy bridges that gap. It acts as a personal health intelligence layer — reading any diagnostic report you upload, building a longitudinal health timeline, detecting trends across visits, and answering your questions in plain language. Supports all major Indian diagnostic labs including Apollo, Thyrocare, Lal Path Labs, Dr. Lal and 50+ more.
| Feature | Description |
|---|---|
| 📄 Reads Any Report | Blood tests, MRIs, prescriptions — in English or Hindi |
| 🧠 Remembers Everything | Builds your personal health timeline automatically |
| 💬 Plain Language Always | No jargon. Explanations anyone can follow |
| 📈 Trend Detection | Spots patterns and anomalies across reports over time |
| 🤖 Ask Anything | Chat with your full health history like a conversation |
| 🇮🇳 India-First | Understands Apollo, Thyrocare, Lal Path Labs, Dr. Lal & 50+ Indian lab formats |
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 14 (App Router) | React framework, SSR/SSG |
| React | 18 | UI library |
| TypeScript | 5 | Type safety |
| Tailwind CSS | 3.4 | Utility-first styling |
| Framer Motion | 12 | Animations & transitions |
| Inter | — | Typography (via next/font) |
- Color palette — Deep void black (
#050508) background with emerald (#34d399) and teal (#5eead4) accent colors - Glass morphism — Frosted glass cards using
backdrop-blurand semi-transparent borders - Custom animations —
float,pulse-glow,shimmer,wavekeyframes in Tailwind config and CSS - Responsive — Mobile-first layout, collapsible navigation, horizontal-scroll timeline on small screens
- Node.js
>= 18.17.0 - npm / yarn / pnpm / bun
# 1. Clone the repository
git clone https://github.com/akyourowngames/Hackthon-healthcare-agent.git
cd Hackthon-healthcare-agent/frontend
# 2. Install dependencies
npm install
# 3. Start the development server
npm run devOpen http://localhost:3000 in your browser.
npm run dev # Start development server with hot reload
npm run build # Create production build
npm run start # Serve production build locally
npm run lint # Run ESLintfrontend/
├── app/
│ ├── globals.css # Global styles, CSS variables, keyframe animations
│ ├── layout.tsx # Root layout with Inter font & metadata
│ └── page.tsx # Main page — assembles all sections
│
├── components/
│ ├── Navbar.tsx # Sticky navbar with animated mobile menu
│ ├── Hero.tsx # Full-screen hero with glow orbs & particle field
│ ├── GlowOrbs.tsx # Animated radial gradient background orbs
│ ├── ParticleField.tsx # Deterministic SVG particle animation
│ ├── UploadPreview.tsx # Drag-and-drop report upload UI
│ ├── ExplainDemo.tsx # Typewriter AI explanation demo
│ ├── HealthTimeline.tsx # Horizontal scrollable health history timeline
│ ├── FeatureCards.tsx # 6-card animated feature grid
│ ├── FinalCTA.tsx # Conversion section with animated CTA button
│ └── Footer.tsx # Footer with navigation links
│
├── public/ # Static assets (SVG icons)
├── tailwind.config.ts # Extended design tokens (colors, fonts, animations)
├── postcss.config.mjs # PostCSS configuration
├── next.config.mjs # Next.js configuration
└── tsconfig.json # TypeScript configuration
- Particle Field — Uses a seeded pseudo-random number generator so particles render identically on server and client (no hydration mismatch)
- Shimmer Border — CSS
::beforepseudo-element with animatedbackground-positioncreates a traveling light effect on the upload card - Glow Orbs — Layered
floatandwaveanimations create organic, depth-of-field-like background motion in the hero - Typewriter Effect —
useEffectinterval drives character-by-character text reveal with regex-based keyword highlighting
- All interactive elements have
focus-visiblering styles - Decorative SVGs marked
aria-hidden="true" - Mobile navigation toggle has
aria-expandedandaria-controls - Timeline rendered as a semantic
<ol>with<article>cards
The project is deployed on Vercel via automatic GitHub integration.
To deploy your own instance:
# Install Vercel CLI
npm i -g vercel
# Deploy from the frontend directory
cd frontend
vercelOr connect your fork to vercel.com for automatic deployments on every push to main.
- Backend API integration for real report parsing (OCR + LLM pipeline)
- Hindi language UI support
- Persistent health profile with authentication
- PDF / image report ingestion (Apollo, Thyrocare, AIIMS formats)
- Doctor-facing summary export
- WhatsApp / SMS report upload flow for feature-phone users
- Trend graphs with interactive charts (Recharts / D3)
Contributions are welcome! Here's how to get started:
# Fork the repo, then:
git checkout -b feature/your-feature-name
git commit -m "feat: add your feature"
git push origin feature/your-feature-name
# Open a Pull RequestPlease follow the existing code style — TypeScript strict mode, Tailwind utility classes, and Framer Motion for all animations.
This project was built for a healthcare hackathon. See LICENSE for details.
Made with ❤️ for India · Built at a Healthcare Hackathon