MedGuide

• 

  Users enter their symptoms in a clean, interactive input interface

• 

  AI-generated summary and probable causes displayed in interactive cards

• 

  Actionable advice and red flags presented clearly for informed decisions

• 

  Downloadable PDF report containing AI analysis, summary, and recommendations

Inspiration

Many people experience symptoms like headache, fever, or fatigue and are unsure whether to seek medical attention. We wanted to create a tool that provides instant, AI-powered health guidance, making it easier for users to understand their symptoms and take timely action.

What it does

MedGuide allows users to type their symptoms, then uses Google Gemini API to generate:

• Summary of the condition
  
• Probable causes
  
• Red flags requiring urgent attention
  
• Recommended actions
  

Results are displayed in interactive, color-coded cards with smooth 2D animations, and users can download a PDF report of the AI analysis.

How we built it

• Frontend: React + TypeScript
  
• Styling: Tailwind CSS with light blue and light green theme
  
• Animations: Framer Motion / Lottie for 2D interactive effects
  
• AI Integration: Google Gemini API for symptom analysis
  
• PDF Generation: jsPDF / react-pdf for downloadable reports
  

Challenges we ran into

• Parsing AI responses into structured, readable cards
  
• Designing smooth animations without affecting performance
  
• Making the UI fully responsive across devices
  
• Ensuring PDF reports maintain clarity and formatting
  

Accomplishments that we're proud of

• A frontend-only web app fully powered by AI
  
• Interactive and visually appealing UI/UX with animations
  
• Real-time PDF report generation for users
  
• Seamless Google Gemini API integration for accurate symptom analysis
  

What we learned

• How to integrate a large language model API into a frontend-only app
  
• Techniques for responsive, interactive UI design
  
• Generating dynamic PDFs from AI responses
  
• Structuring user-friendly AI output for better comprehension
  

What's next for MedGuide

• Expand to a mobile app for iOS and Android
  
• Incorporate advanced AI models for personalized risk prediction
  
• Collaborate with healthcare professionals for validation
  
• Add multi-language support and enhanced visualizations like charts and graphs
  

Built With

• framer-motion
• javascript-styling-&-animations:-tailwind-css
• languages-&-frameworks:-react
• lottie-apis-&-ai:-google-gemini-api-pdf-generation:-jspdf-/-react-pdf-platforms-&-deployment:-vite
• tools:
• typescript
• vercel
• vscode