POPDOC

POPDOC is a pop culture-inspired medical companion for Bolt 1M Hackathon, blending AI with beloved fictional doctors to offer wellness check-ins, chat, emotional support, and personalized care.

Comment

POPDOC: Heroic Health - Devpost Submission

🎯 Project Title

POPDOC: Heroic Health

🌟 Tagline

AI-powered medical chat app with pop culture doctors from across the multiverse

📝 About the Project

Inspiration

Healthcare often feels distant and intimidating. What if getting medical guidance felt like talking to a trusted friend? POPDOC combines cutting-edge AI with the comfort of beloved fictional doctors, creating a unique healthcare experience that's both informative and engaging.

What it does

POPDOC is a Marvel Rivals-style web application where users chat with 30 iconic pop culture doctors from across entertainment universes. From Dr. McCoy's gruff wisdom to Dr. Zoidberg's quirky insights, each doctor delivers personalized medical guidance powered by OpenAI's GPT with authentic voice responses via Google Cloud TTS and ElevenLabs.

Key Features:

  • 30 legendary doctors from Star Trek, Marvel, DC, Futurama, and more
  • Real-time AI chat with personality-driven responses
  • Voice synthesis with character-appropriate tones
  • Symptom checker with voice-guided diagnosis
  • LCARS-inspired UI with Marvel Rivals aesthetics
  • Full accessibility support with ARIA compliance
  • Chat history and persistent conversations
  • Doctor of the Day feature with rotating highlights

How we built it

Frontend: React 19 + TypeScript + Vite + Tailwind CSS Backend: Express.js + Node.js with JWT authentication AI Integration: OpenAI GPT-4 for medical responses Voice AI: Google Cloud Text-to-Speech + ElevenLabs fallback Deployment: Netlify with custom domain capability Development Platform: Built primarily on Bolt.new Database: JSON-based doctor profiles with custom avatars UI Framework: Custom LCARS components with particle effects

Architecture:

  • Component-based React architecture with TypeScript
  • Express REST API with CORS and JWT middleware
  • Dual voice synthesis system for reliability
  • Responsive design with mobile-first approach
  • Accessibility-first development with screen reader support

Challenges we ran into

  1. React 19 Compatibility: Lucide-react dependency conflicts required upgrading to v0.525.0
  2. Voice Personality Matching: Calibrating TTS parameters to match character personalities
  3. LCARS UI Implementation: Creating authentic Star Trek aesthetics with modern web technologies
  4. Accessibility Balance: Maintaining visual spectacle while ensuring full screen reader compatibility
  5. API Integration: Seamlessly blending multiple AI services for consistent user experience

Accomplishments that we're proud of

  • 30 Unique Doctor Personalities with authentic character traits and medical specialties
  • Dual Voice AI System providing reliable, character-appropriate responses
  • Full Accessibility Compliance with ARIA labels and keyboard navigation
  • LCARS-Marvel Hybrid UI that's both futuristic and familiar
  • Challenge Domination - qualified for 4 major hackathon challenges
  • Performance Optimized with 17-second build times and efficient bundling
  • Cross-Platform Compatibility working seamlessly across devices

What we learned

  • React 19's new features and compatibility considerations
  • Advanced voice synthesis parameter tuning for character authenticity
  • ARIA accessibility best practices for complex interactive applications
  • Modern deployment pipelines with Netlify and environment management
  • Bolt.new's capabilities for rapid prototyping and development
  • Balancing visual appeal with functional accessibility

What's next for POPDOC

  • Tavus Video Integration for real-time AI video consultations
  • Medical History Tracking with encrypted personal health records
  • Prescription Reminders with voice notifications
  • Telehealth Integration connecting users to real healthcare providers
  • Mobile App Development for iOS and Android platforms
  • Multilingual Support expanding access globally
  • Advanced Diagnostics with symptom pattern recognition
  • Community Features allowing users to share experiences safely

🏆 Challenges Completed

✅ Voice AI Challenge - ElevenLabs Integration

  • Implementation: Dual TTS system with Google Cloud primary, ElevenLabs fallback
  • Features: Character-specific voice parameters, real-time synthesis, toggle controls
  • Account: [ElevenLabs account email will be provided]

✅ Deploy Challenge - Netlify Deployment

  • Implementation: Full-stack deployment with automated build pipeline
  • Features: Environment variable management, custom build commands, production optimization
  • Team Slug: [Netlify team slug will be provided]

✅ Custom Domain Challenge - Domain Management

  • Implementation: Custom domain setup for professional presentation
  • URL: popdoc.bolt.new (configured via Entri/IONOS)

✅ Conversational AI Video Challenge - Ready for Tavus

  • Implementation: Architecture designed for video agent integration
  • Features: Chat interface ready for video overlay, responsive design for video UI

🔗 Links

Live Application

Demo Video

  • YouTube URL: [Demo video URL will be provided]
  • Duration: Under 3 minutes
  • Content: Full feature demonstration, voice integration, accessibility showcase

🛠 Built With

  • React 19
  • TypeScript
  • Vite
  • Tailwind CSS
  • Express.js
  • OpenAI GPT-4
  • Google Cloud Text-to-Speech
  • ElevenLabs
  • Netlify
  • Bolt.new
  • Lucide React Icons
  • Framer Motion

📦 Installation & Setup

# Clone the repository
git clone https://github.com/asherengos/popdoc.git
cd popdoc

# Install dependencies
npm install --legacy-peer-deps

# Set up environment variables
cp .env.example .env
# Add your API keys to .env

# Start development server
npm run dev

# Build for production
npm run build

🎮 Try It Out

  1. Visit the live application at [production URL]
  2. Select your favorite doctor from the character grid
  3. Start a conversation about health concerns
  4. Experience voice responses with character personalities
  5. Test accessibility features with keyboard navigation
  6. Explore the symptom checker functionality

🎯 Target Audience

  • Health-conscious individuals seeking approachable medical guidance
  • Pop culture enthusiasts who want familiar, comforting interactions
  • Accessibility-focused users requiring inclusive healthcare tools
  • Tech enthusiasts interested in AI-powered applications
  • Anyone looking for a more engaging healthcare experience

💡 Innovation Highlights

  • First-of-its-kind pop culture medical application
  • Dual voice AI system for maximum reliability
  • Character authenticity with personality-matched responses
  • Universal accessibility without compromising visual appeal
  • Multiverse medical team spanning entertainment franchises
  • LCARS-modern hybrid UI bridging sci-fi and contemporary design

POPDOC isn't just an app—it's your medical companion with a pop culture twist. When health anxiety strikes, when you need guidance, when you want a familiar voice... POPDOC assembles. Healthcare that's heroic, accessible, and human.

🚀 Built with Bolt.new for the World's Largest Hackathon 🚀

Built With

  • bolt.new
  • elevenlabs
  • express.js
  • framer-motion
  • google-cloud-text-to-speech
  • jwt-authentication
  • lucide-react-icons
  • netlify
  • node.js
  • openai-gpt-4
  • react-19
  • tailwind-css
  • typescript
  • vite
Share this project:

Updates