aws-amplify gatsby gatsbyjs hacktoberfest react sleep typescript

Nyxo Website – Better Sleep 💤💤💤

Download iOS • Download Android • Contact • Nyxo Newsletter

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

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 it.

AWS Amplify In order to run the site, you also need to setup aws-amplify. We have written pretty good instructions about this on our site.

3) Start the site in `develop` mode.

Next, move into your new site’s directory and start it up:

cd nyxo-website/
gatsby develop

Open the source code and start editing!

Your site is now running at http://localhost:8000. Open the Nyxo directory in your code editor of choice and edit src/pages/index.js. Save your changes, and the browser will update in real time!

At this point, you’ve got a fully functional Gatsby website. For additional information on how you can customize your Gatsby site, see our plugins and the official tutorial.

🤝 Contributing

This project welcomes all contributions. This includes but is not limited to:

Blog posts (you're always welcome to contribute to our blog, topics where interested in: sleep and technology)
Localization of the site (currently we support finnish and english)
Visualizing data (if you want to build a new chart to display your own data in the details page for example)
New features (this means everything that makes Nyxo Sleep Coaching / Sleep Data easier to understand / use)