DoctorSim

Inspiration

The doctor's waiting room is often a place of anxiety and wasted time. Patients sit idly, often confused or nervous about their health, insurance, or upcoming appointment. We saw an opportunity to transform this "wait time" into "learning time." Our inspiration was to create an engaging, accessible, and fun tool that demystifies healthcare, reduces patient anxiety, and improves health literacy before they even see the doctor.

What it Does

DoctorSim is an 8-bit, Pokemon-inspired educational game where patients learn crucial healthcare concepts. Players take on the role of a doctor and answer questions from a queue of pixel-art patients. The game covers key topics like Preventive Care, Insurance Basics, and Medication Management.

Key features include:

• Interactive 8-bit Game: A mobile-first, retro-style interface with smooth Framer Motion animations.
• Smart Hint System: A limited-use notepad provides hints, with usage tracked for analytics.
• AI-Powered Analysis: After a session, an AI analyzes the player's responses to identify knowledge gaps and provide personalized learning recommendations.
• Data-Rich Results: Players see interactive Recharts visualizations to understand their strengths and weaknesses.
• Full User Dashboard: Tracks personal progress, session history, and overall stats.

How We Built It

We built DoctorSim as a full-stack Next.js 14 application using TypeScript.

• Frontend: The UI was built with Tailwind CSS for a mobile-first, responsive design. We used Framer Motion for all animations to bring the 8-bit world to life and Recharts for the analytics dashboard. Global game state (like hints and session progress) is managed with Zustand.
• Backend: We used Next.js API Routes to create a robust RESTful API. NextAuth.js handles authentication (email/password and Google OAuth) with role-based access.
• Database: A PostgreSQL database serves as our single source of truth, managed with the Prisma ORM. The schema includes 8 tables to track everything from user responses and hint usage to AI analysis reports.
• AI Integration: The analysis feature securely calls the OpenAI GPT-4 API to provide personalized feedback based on a user's session performance.

Challenges We Faced

One of the biggest challenges was balancing the 8-bit aesthetic with modern UX/UI principles. We had to ensure the pixel art style was not only charming but also accessible, responsive, and mobile-first on tablets and phones.

Another challenge was the AI integration. Prompt engineering was key to ensuring the AI analysis provided feedback that was not just accurate, but also empathetic, educational, and actionable for a patient.

Finally, managing the complex game state—tracking responses, timing, hints used, and the patient queue—required a carefully planned state management solution, which we successfully implemented with Zustand.

What We Learned

This project was a deep dive into full-stack, production-ready development. We learned how to architect a complex application from scratch, integrating a database, authentication, and a third-party AI all within the Next.js ecosystem.

We gained significant experience in database design with Prisma, responsive UI/UX with Tailwind and Framer Motion, and secure API development. Most importantly, we learned how to build a complete, polished product that is deployed and ready for users.

Built With

• anthropic-claude
• framer-motion
• next.js-14
• nextauth.js
• openai-gpt-4
• postgresql
• prisma
• react
• recharts
• tailwind-css
• typescript
• vercel
• zustand