donatoaguirre24 / sleep-app

Sleep app made with React Native

🛏 Sleep App

⏯ Demo

iOS

ios-demo.mov

Android

android-demo.mov

Tests & Linters

👨🏻‍💻 Technical Documentation

Setup

• Node.js 16
• Npm 8
• Watchman
• Ruby 3.1
• Cocoapods 1.11.2
• Xcode 13
• Java JDK 11
• Android Studio Chipmunk

Run the App

• Prerequisite: setup your environment
• Install dependencies: yarn && pod install --project-directory=ios
• Start metro server: yarn start (keep it running)
• Launch iOS simulator: yarn ios
• Launch Android simulator: yarn android

Core Dependencies

• @react-navigation navigation library.
• @shopify/restyle a type-enforced system for building UI components.
• react-native-localization to manage localization.
• react-native-svg and victory-native for charts and graphics.
• react-native-testing-library and jest for testing.

Project Structure

├── src              # The main container of all the application's code
│   ├── data         # Any kind of constant that you have
│   ├── localization # Locale files
│   ├── navigation   # Navigation logic and types
│   ├── features     # Application screens/features
│   ├── services     # Business logic and utilities
│   ├── ui           # Shared components and UI elements (such as a button or the app's theme)
│   └── app.ts       # Main app component
├── tests            # The main container of all the application's tests
└── index.js         # Entry point of the application as per React-Native standards

---

🔎 Research & Product

Inspiration Sources

• Apple Health
• Apple Fitness
• Pillow
• Eight Sleep
• Human Interface Guidelines

Biases

• Being a big consumer of Apple products, I have a predilection for the aesthetics of iOS.
• I decided to focus on polishing the look and feel of the iOS app because the Eight Sleep app seems to be quite iOS-oriented. Also, based on the subscriptions and products they offer, I bet most of their users are on iOS.

Improvement Ideas

• Add proper icons for the heart and respiratory rate
• Include min and max values for health metrics (heart and respiratory rate)
• Improve charts animations in Android
• Fetch data from the network instead of using static data
• Add app icon and splash screen
• Add skeletons to handle loading states (if network requests were made)
• Add haptic feedback to the overview card tap
• Improve x-axis accuracy and the ticks labels on charts

Time Management Decisions

I tried to create a rich yet simple visual experience. Since the goal of health/fitness app users is mostly to track and improve their performance, I focused on the charts and visual elements to make it easier.

Given the time constrains and the fact that I was provided just with a detail/show endpoint but not with an overview/index one, I decided to use static data. To take advantage of it, I created an "overview" file combining information from the three users' data and feeds the landing screen of the app.