DEV Community

Cover image for I made the React Native app I've been building for the last year open source

I made the React Native app I've been building for the last year open source

TLDR: here's react-native sleep tracking & sleep coaching app that I've been building

In January 2019 I took a big leap into startup entrepreneurship and started building an app that could provide advice on how to improve your sleep based on your sleep tracker's data. When I started building it I had very little experience with React and even less experience with React Native. Because of having so little experience, I was afraid to make the code publicly available despite wanting to do it so from the start.

Few weeks I finally found the courage to clean the project and switch from private Gitlab repo to a public Github repository. You can find the full code here. I've tried to provide all the necessary instructions on how to run it locally, but there might be a few mistakes on my part here and there. Please let me know if/when you come across them.

GitHub logo hello-nyxo / nyxo-app

The repository for Nyxo React Native app, a personal sleep tracker and sleep coach

Nyxo App

Nyxo App – Better Sleep 💤💤💤

code style: prettier commit activity release license


Download iOS • Download Android • Contact • Nyxo Newsletter

What is Nyxo App

Nyxo is a mobile application for improving your sleep. Its built with React Native, AWS Amplify, styled-components, and Redux. Nyxo provides the following features:

  • Sleep tracking, with support for multiple different trackers
    • Google Fit
    • Apple Health
    • Oura
    • Withings
    • Fitbit
    • Polar
  • Sleep trends and sleep diary
  • Nyxo Cloud: backup your sleep data and coaching progress, and access it from nyxo.app
  • 4 week sleep coaching program
  • Ask experts, if you have any questions we have the professional sleep coaches to help
  • And more

The plan is to develop Nyxo further and allow contributions from everyone. If you want to for example build a new sleep visualization or add support for new sleep tracker, we will gladly welcome a pull request of that :)

Can

…

Why this project might be interesting to you?

As mentioned I built it with React Native, while originally having very little experience on it. I would like to say that I've improved a lot since starting out, so in a way this project works as a timeline of how I learned to build stuff with React Native. There are parts in the project where the code is really ugly, but also parts where I'm a little proud of it even.

To give a little rundown of the app here's what it can do:

  • Import sleep data from the following sources
    • Apple Health
    • Google Fit
    • Oura
    • Garmin
    • Polar
    • Fitbit
    • Withings
  • Save data to Apple Health
  • Create trackable habits
  • Show stats based on sleep: bedtime window, average sleep, sleep trend, shortest night, longest night, etc.
  • Save data to Nyxo Cloud Service, which is built with Aws Amplify
  • Display content about sleep from Contentful
  • Works on both iOS and Android

There also some more boring features, which you can explore better by downloading the app from either App Store or Play Store. One really crucial thing that is missing is onboarding, which I'm hoping to add as soon as possible.

Tech

The app is built with the following stuff:

  • AWS Amplify: S3, Cognito, AppSync, DynamoDB, Aws Lambda
  • React Native
  • Redux, reselect, redux-offline
  • react-native-reanimated
  • react-native-svg
  • Intercom

Continuity

This is project is also very much alive and I'm contributing to it daily. If you like the app, I would really appreciate it if you give it a star either in Github or in App store / Play store. It would mean a lot to me, and make my whole week :)

PS.

I've also built another app during the past year. This app also doubles as a website for Nyxo, as it's built with Gatsby, Amplify, TypeScript, Styled-components, and react-query. You can find that project below:

GitHub logo hello-nyxo / nyxo-website

Nyxo website, built with Gatsby, AWS Amplify, React and TypeScript

Nyxo Website – Better Sleep 💤💤💤

Download iOS • Download Android • Contact • Nyxo Newsletter

All Contributors

Build, test, and release code style: prettier commit activity release license

This is the website that powers nyxo.app. It's built with the following tools:

  • Gatsby
  • React
  • styled-components
  • aws-amplify
  • Netlify

🚀 Quick start

1. Install the Gatsby CLI.

npm install -g gatsby-cli
Enter fullscreen mode Exit fullscreen mode

2. Setup AWS Amplify + environment variables

In order to develop the site, you need to create file called .env.development in the root of the project. The contents of the file should we following:

INSTAGRAM_API_TOKEN=YOUR_KEY
INSTAGRAM_BUSINES_ID=YOUR_KEY
GTAG_ID=YOUR_KEY
GOOGLE_ANALYTICS=YOUR_KEY
CONTENTFUL_SPACE_ID=YOUR_KEY
CONTENTFUL_ACCESS_TOKEN=YOUR_KEY
CONTENTFUL_ENVIRONMENT=YOUR_ENVIRONMENT
MAILCHIMP_ENDPOINT=YOUR_KEY

We use Contentful so serve our coaching data. When development you can use our public testing environment by placing the following values in it:

CONTENTFUL_SPACE_ID=2bj8pq0ood89
CONTENTFUL_ACCESS_TOKEN=7yCg2oVBg-kQAhPrNTI0935HDiUJ7FYlUyIwM3Tspgg
CONTENTFUL_ENVIRONMENT=public

Our Instagram component will most likely complain that it can fetch data, because you're missing the required tokens. We are working on how to disable this. For now you should be able to skip…

Top comments (0)