We just launched our new Hygraph Studio in beta. Learn more

Hasura Fit: Complete Guide / Start Here

This is a multi-part tutorial on creating a fitness app with modern web-technologies. It utilises user accounts (Auth0), User data (Hasura), Editorial content (Hygraph), serverless functions (Vercel) and the popular React framework NextJs (also hosted on Vercel).
Jesse Martin

Jesse Martin

Aug 09, 2020
Hygraph, Hasura, Auth0, NextJS, Vercel

This is a multi-part tutorial on creating a fitness app with modern web-technologies. It utilises user accounts (Auth0), User data (Hasura), Editorial content (Hygraph), serverless functions (Vercel) and the popular React framework NextJs (also hosted on Vercel).

In order, the tutorial should be created:

  1. Set up Hygraph
  2. Set up Auth0
  3. Set up NextJs
  4. Set up the Serverless Functions
  5. Set up Vercel
  6. Set up Hasura

The rough flow of our application is as follows.

A user comes to our application which shows content required no authentication. They decide to join the program and signup.

When signing up, they are redirected to Auth0 where a new user account is created, which in turn creates a new user account in Hasura for later reference, and then sends an authentication token back to our user in the web app with special permissions to be re-used with our Hasura API and a few modified parameters to help us confirm who our user is there.

The web application updates with this new information and then shows authenticated content, such as our workout programs, which comes from Hasura at the query level, but is resolved from Hygraph through a federated API mesh which we configured in Hasura.

Once our user performs one of the workouts, this action will save a new session in our Hasura database and at the same time, trigger a web hook which increments the popularity of that workout in our Hygraph content API.

Here’s a rough flow chart for the following steps.

hasura-fit-master-diagram.png

If you find errors, typos, or updates to the functionality, pull requests are always welcome!

Next: Set up Hygraph

Blog Author

Jesse Martin

Jesse Martin

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.