Sleep is one of the most important aspects of maintaining good health, yet many people struggle with tracking and improving their sleep habits. We wanted to create a fun, interactive, and data-driven way to help users understand their sleep quality while making the experience engaging. The idea of using dragons to represent different sleep scores adds a playful, visual element that makes sleep tracking more accessible and intuitive.
ZeeZee is an AI-powered sleep tracking app that takes user inputs related to their sleep patterns, calculates a personalized sleep score, and provides visual feedback in the form of a dragon avatar that reflects the quality of their rest.
Users input their age, sleep start and end time, number of awakenings, duration of awakenings, and activity level. The app calculates a sleep score (0-100) based on scientifically-backed sleep metrics. Depending on the score, users see a dragon image that represents their sleep quality:
- Sleeping Dragon (90-100): Excellent Sleep
- Annoyed Dragon (80-89): Good Sleep
- Sad Dragon (60-79): Average Sleep
- Angry Dragon (Below 60): Poor Sleep
How we built it: Frontend: Built using React Native to ensure cross-platform compatibility. State Management: Used React hooks (useState) to handle user inputs dynamically. Sleep Calculation: Implemented custom JavaScript functions to analyze user inputs and compute sleep metrics based on recommended sleep durations and sleep efficiency models. UI/UX: Incorporated React Native Picker for activity level selection and used ImageBackground to enhance the visual appeal with a custom background.
Challenges we ran into:
- Ensuring the sleep score algorithm accurately reflects real-world sleep recommendations while being easy to understand.
- Handling different time formats (HH:MM input parsing) and making sure the sleep calculations work correctly when users sleep past midnight.
- Picker implementation issues, as it was not recognized correctly in earlier versions of the app.
- Finding the right balance between scientific accuracy and gamification to make sleep tracking engaging but still meaningful.
Accomplishments that we're proud of:
- Successfully integrated a scientifically-backed sleep score algorithm that considers multiple sleep parameters.
- Designed a fun, interactive, and engaging UI that makes sleep tracking enjoyable.
- Overcame technical challenges with React Native components like Pickers, Image handling, and time-based calculations.
- Created an experience that not only provides insights but also encourages users to improve their sleep habits in a visually intuitive way.
What we learned:
- The importance of user engagement in health-focused apps—gamifying sleep tracking makes it more accessible and motivating.
- How to handle dynamic image rendering based on computed data in React Native.
- Improved our React Native debugging skills, especially around state management and component rendering issues.
- Learned about sleep science and the impact of different factors (age, activity level, wake times) on sleep quality.
What's next for ZeeZee?
- AI Chatbot Integration: Implement an AI sleep assistant to provide users with personalized sleep tips and suggestions based on their sleep patterns.
- Wearable Device Support : Integrate with Apple Health and Fitbit to automatically track sleep data.
- Social Features: Allow users to share progress and challenges with friends for accountability and motivation.
- Personalized Sleep Plans: Based on user history, generate custom sleep improvement strategies with actionable insights.
- Dark Mode & UI Enhancements: Improve accessibility and provide a better nighttime experience.
Log in or sign up for Devpost to join the conversation.