A polished, interactive medical appointment app prototype built with React. Designed for Gen-Z and Millennial patients who expect modern, seamless digital healthcare experiences.
TrustedDoc demonstrates a complete patient engagement platform — from finding and booking doctors to tracking health metrics and communicating with care teams. The prototype renders inside a realistic iPhone 15 Pro frame for presentation-ready demos.
Core Experience
- Doctor discovery with search, filtering by specialty, and favorites
- Detailed doctor profiles with bios, reviews, insurance info, and availability
- Appointment booking with in-person and video consultation options
- Real-time appointment management (cancel, reschedule)
Health & Wellness
- Health dashboard with vitals tracking (heart rate, BP, steps, sleep, weight, O2)
- Medication tracker with daily check-off
- Step goal progress ring
Communication
- Secure messaging with doctors
- Notification center with read/unread states
- Video call integration (UI)
Patient Profile
- Insurance coverage display
- Saved doctors
- Medical records access
- HIPAA compliance indicators
- React 19 — UI components
- React Router 7 — Client-side navigation
- Vite 8 — Build tooling
- CSS — Custom properties, no external UI library
- Context API — State management
# Clone the repo
git clone https://github.com/YOUR_USERNAME/trusted-doc.git
cd trusted-doc
# Install dependencies
npm install
# Start dev server
npm run dev
Open http://localhost:5173 to view the app.
npm run deploy
src/
├── components/ # Shared UI (BottomNav, StatusBar)
├── context/ # App-wide state (appointments, favorites, meds)
├── data/ # Mock data (doctors, notifications, health metrics)
├── screens/ # Page-level components
│ ├── HomeScreen
│ ├── DoctorDetail
│ ├── AppointmentsScreen
│ ├── HealthDashboard
│ ├── ChatListScreen / ChatScreen
│ ├── NotificationsScreen
│ ├── ProfileScreen
│ └── OnboardingScreen
└── main.jsx # Entry point
| Color | Hex | Usage |
|---|---|---|
| Blue Primary | #51A8FF |
CTAs, active states |
| Dark Navy | #09121C |
Headings, body text |
| Blue Light | #D4E9FF |
Backgrounds, badges |
| Blue Medium | #316599 |
Secondary elements |
| Blue Dark | #142A40 |
Dark accents |
MIT