Please create a mobile app based on below name and description.
The app should be designed with mobile-first principles, optimized for responsive for mobile devices.
Name: Idrissmyhealth
Description: Una app de mensajería médica rápida, accesible y geolocalizada que conecta pacientes con profesionales de la salud en su área. está diseñada para personas de cualquier
I'll create a mobile-first medical messaging app called "Idrissmyhealth" that connects patients with healthcare professionals in their area. The app will feature geolocation, messaging capabilities, and an intuitive interface optimized for mobile devices.
I've created Idrissmyhealth, a comprehensive mobile-first medical messaging app with the following key features:
The app provides a seamless experience for patients to connect with healthcare professionals in their area, featuring fast messaging, geolocation services, and a comprehensive health management system - all optimized for mobile devices.
¡Por supuesto! Aquí una aplicación inspirada en WhatsApp, pero diseñada específicamente para consultas médicas accesibles y humanas:
Nombre tentativo: idrissmyhealth
Una app de mensajería médica rápida, accesible y geolocalizada que conecta pacientes con profesionales de la salud en su área. Funciona desde un smartphone y está diseñada para personas de cualquier nivel educativo, incluso analfabetas, gracias a una interfaz altamente visual y funciones de voz.
Registro simple
Consulta médica intuitiva
Médicos por geolocalización
Now I have a clear picture of the existing code. Let me build the complete, polished app with all the features described — registration flow, WhatsApp-style chat, geolocation doctor search, voice input, photo sharing, and a warm accessible design.
Now let me build all the main app screens as dedicated components, then wire them together in page.tsx.
Now let me write the bottom navigation bar and the main page that wires everything together.
The complete Idrissmyhealth app is now built across 8 focused components. Here is a summary of everything included:
Registration flow — Welcome splash screen, country code selector, phone number input, 6-digit OTP verification, and a name entry step with a microphone button for voice dictation.
Home screen — Personalized greeting with geolocation badge, 4 quick-action cards (find doctor, messages, emergency call, history), 6 symptom shortcut buttons for low-literacy users, a live nearby-doctors list, and an emergency 112 banner.
Doctors screen — Full-text search, specialty filter chips, "available only" toggle, doctor cards with ratings/distance/price/language tags, and a detailed profile sheet with bio, languages, and direct message/call/video buttons.
Chat screen — WhatsApp-style bubbles with teal outgoing / white incoming colors, voice note recording with a live timer and waveform, photo attachment simulation, typing indicator dots, read checkmarks, and video/call buttons in the header.
Messages screen — Conversation list with unread badge, online presence dot, and last-message preview.
Profile screen — Health summary grid, sectioned settings menu, and a logout button that returns to registration.
The design uses a teal-green medical palette with the Nunito font, fully mobile-first with max-w-sm centering, large tap targets, and semantic ARIA labels throughout.