First mobile app in Brazil developed to monitor patient adherence and clinical outcomes during at-home whitening treatments.
Role — Designer, Full-Stack Developer
Year — 2024
Tech Stack — Expo, TypeScript, NestJS, GraphQL, MongoDB, Mongoose, AWS Cognito, React Navigation, Redux, React Query, Vision Camera
Ultradent’s Opalescence is the world’s leading teeth whitening gel, backed by over 30 registered patents and a commitment to continuous research and innovation. The brand serves a broad consumer base seeking scientifically advanced dental solutions that deliver proven results.
The goal was to create an app that would enable dentists and patients to monitor whitening treatments seamlessly. The Opalescence app represents a shift in how dental treatments are delivered and tracked, bringing clinical oversight directly to patients’ smartphones while giving dentists powerful tools to manage and optimize treatment outcomes.
Built with Expo (React Native) and TypeScript, the mobile application represents the complete patient journey from authentication through treatment completion. The architecture centers around navigation flows, built with the React Navigation library, that accommodate both patients and dental professionals, with role-based interfaces that adapt to user context.
The Dentist Flow
The main dentist user flow centers on patient treatment monitoring through a custom-developed calendar interface. Each calendar day displays visual indicators showing whitening gel application status, including photo previews. Tapping individual days reveals a detailed application report with sensory feedback and photo documentation.
Dentists maintain full treatment control through the editing interface, where they can configure application schedules, set daily application duration and timing, choose the Opalescence product, and adjust treatment parameters.
The Patient Flow
The main patient user flow centers on registering applications at the frequency that the dentist specified. The user receives an automatic push notification and is guided to register feedback for the level of sensitivity and gingival irritation.
For the photo capture, an AI smile detection feature helps patients take consistent treatment photos. Using React Native Vision Camera Frame Processor, with a custom-developed smile detector model running locally, it detects when patients are smiling and the proper luminance.
The feature provides real-time visual feedback through camera overlays, guiding patients to achieve the correct smile positioning needed for treatment documentation. When the system detects an appropriate smile, it automatically captures the photo.
The Backend Foundation
The backend is built with NestJS, providing the core API infrastructure for the platform through GraphQL endpoints with Apollo Server integration. The application bootstraps with CloudWatch logging, global validation pipes, and Mongoose to handle the database abstraction.
The backend architecture follows NestJS module patterns with clear separation of concerns. Authentication relies on AWS Cognito as the user management integration. MongoDB with Mongoose serves as the data layer, with the platform implementing proper schema validation and error handling through custom exception filters. The database design supports the complex relationships between users, treatments, applications, and progress tracking data needed for the dental workflow.
The GraphQL schema is automatically generated from TypeScript decorators and class definitions, ensuring type safety between the backend services and client applications. Each module exposes its own resolvers and services.
Conclusion
The Opalescence mobile app serves over 2,000 active users, with 974 patients completing more than 700 documented treatments. The comprehensive data collection includes detailed sensitivity and irritation records alongside over 1,000 treatment progress photos, providing dentists with unprecedented clinical documentation.
The app is hosted on AWS and is available on the Android and iOS stores. It has proven its effectiveness through sustained user engagement and reliable data capture. Analytical data is collected in real time in the Amplitude platform and gives Ultradent’s product and marketing management real data to keep improving the app.
Most importantly, the app demonstrated that mobile technology can enhance clinical workflows without adding complexity, establishing a new standard for patient-provider collaboration in dental care through intuitive, data-driven treatment management.
See other case studies
Talyon
Amora