ios-demo.mov
android-demo.mov
- 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
- @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.
โโโ 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
- 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.
- 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
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.