Dottie
Overview
Dottie is an innovative, open-source AI-powered application designed to be the ultimate period companion for adolescent girls. More than just a tracking app, Dottie serves as a friendly digital bestie that empowers young people with essential knowledge about their menstrual health through accessible, AI-driven guidance. At its core, Dottie functions as an intelligent symptom checker specifically crafted for adolescent girls and their caregivers. The app helps users distinguish between normal and abnormal menstruation patterns, providing peace of mind and educational insights delivered through a warm, approachable digital mascot that makes discussing periods feel natural and comfortable. Mission-Driven Design Dottie's mission centers on empowering adolescent girls with comprehensive knowledge about their menstrual health. By combining cutting-edge AI technology with a user-friendly interface, the app makes menstrual health education accessible to everyone, regardless of background or previous knowledge. Vision for the Future The app works toward creating a world where young people truly understand their bodies, recognize menstrual health as a vital sign of overall wellness, and feel confident and empowered when seeking medical care. Dottie breaks down barriers and stigma surrounding menstruation, fostering open conversations about reproductive health. Open Source Impact As an open-source project, Dottie represents a community-driven approach to menstrual health education. This transparency ensures the app remains accessible, continuously improved by contributors worldwide, and free from commercial biases that might compromise its educational mission. Whether you're a teen experiencing your first period, a parent supporting your child's journey, or a caregiver seeking reliable menstrual health information, Dottie provides the knowledge, support, and confidence needed to navigate menstrual health with understanding and empowerment.
Project Goal
To empower adolescent girls with knowledge about their menstrual health through accessible, friendly AI-powered guidance. The project aims to provide a safe space for users to learn about menstruation, understand their bodies, and make informed decisions about their health.
Key Features
- AI-powered symptom assessment tailored to menstrual patterns, delivering personalized guidance on what is normal and when to seek medical advice. –
- Friendly 3D mascot interface designed to reduce stigma and make interactions approachable and comforting. –
- Light and dark mode support, ensuring visual comfort and accessibility across different user environments. –
- Conversation-style chat interface, guiding adolescents and caregivers through assessments with age-appropriate language. –
- Personalized educational content, offering explanations tailored to users’ age and health literacy. –
- Symptom-to-action recommendations, helping users decide whether their symptoms are normal, need monitoring, or require medical attention. –
- Progressive Web App (PWA) capabilities, including manifest configuration and cross-device compatibility for an app-like experience. –
- Responsive design and mobile-friendly UI, including a sheet-style mobile navbar and smooth layout transitions across devices. –
Color Scheme
Pure white for main backgrounds and text contrast.
Very light pink background used for soft, feminine sections.
Bright pink accent color for primary buttons and highlights.
Deeper pink for hover states and darker pink accents.
Light blue-gray background for clean, neutral sections.
Light neutral gray for background areas and cards.
Medium light gray for subtle borders and dividers.
Dark gray for secondary text and less prominent elements.
Very dark gray for primary headings and important text.
Near-black color for high contrast text and dark elements.
Dark gray background for dark theme sections.
Very dark gray for primary dark theme backgrounds.
My Contribution
As a contributor and designated Code Owner for the Dottie 3D mascot project, I helped shape the visual identity and user experience of the application. I enhanced the 3D teardrop mascot by refining the eye highlights, smoothing the model’s geometry, and adjusting the mouth shape to create a more approachable and expressive character. I implemented a dark mode toggle using Tailwind CSS, with a focus on accessibility and eye comfort, including global variables and intuitive sun and moon icons. To improve readability and maintain consistency, I updated the UI’s color palette to use higher-contrast shades throughout the app. I also reworked the favicon setup and introduced a valid site.webmanifest file to improve support for progressive web app features and cross-device compatibility. On the navigation side, I rebuilt the mobile navbar into a modern sheet-style drawer, improving interaction and layout responsiveness for both logged-in and logged-out users. As a Code Owner, I regularly reviewed and approved pull requests, ensured code quality, and opened new issues to guide and support the ongoing development of the project.
Tech Stack
NodeJS
ExpressJS
React
Typescript
Tailwind