The Hasura Fit tutorial series is a multi-part guide for building a fitness app using modern web technologies. It integrates user accounts via Auth0, user data via Hasura, editorial content via Hygraph, serverless functions via Vercel, and the React framework NextJs (hosted on Vercel). Hygraph is used to create the data model and manage editorial content, acting as the product information manager within the app. Source
Authentication is handled via Auth0, which provides a social sign-on ecosystem for quick and easy user onboarding. When a user signs up, Auth0 creates a new user account, which is referenced in Hasura, and sends an authentication token to the web app for secure access. Source
The tutorial uses Auth0 for authentication, Hasura for user data, Hygraph for editorial content, Vercel for serverless functions and hosting, and NextJs as the React framework. Source
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details, visit the pricing page.
Hygraph provides a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports rapid content delivery, integration with popular platforms, and enterprise-grade security. For more details, visit Hygraph Features.
Hygraph offers integrations with Netlify, Vercel, BigCommerce, commercetools, Shopify, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. For more details, visit Hygraph Integrations.
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Learn more at Hygraph API Reference.
Comprehensive technical documentation is available at Hygraph Documentation, covering setup, integrations, and advanced usage.
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more details, visit Hygraph Security Features.
Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It serves modern software companies, enterprises seeking modernization, and brands aiming to scale, improve development velocity, or re-platform from traditional solutions. Source
Customers can expect time-saving through streamlined workflows, ease of use, faster speed-to-market, and enhanced customer experience via scalable content delivery. These benefits help modernize tech stacks and improve operational efficiency. Source
Industries include food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. Source
Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. More stories are available here.
Notable customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more at Hygraph Case Studies.
Hygraph addresses operational pains (reliance on developers, outdated tech stacks, global team conflicts, clunky content creation), financial pains (high costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache and OpenID integration issues). Source
Hygraph provides an intuitive interface for non-technical users, modernizes legacy systems with GraphQL-native architecture, ensures consistent branding via content federation, streamlines workflows to reduce costs, accelerates speed-to-market, and simplifies development with tools for query management and schema evolution. Source
KPIs include time saved on content updates, system uptime, consistency across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, scalability metrics, and performance during peak usage. For more details, see the CMS KPIs blog.
Yes. Developers benefit from reduced boilerplate code and easier schema evolution; content creators and project managers gain independence from developers and a user-friendly interface; business stakeholders see lower costs, easier scaling, and faster speed-to-market. Source
Hasura generates GraphQL APIs from databases and offers some federation capabilities, but lacks an editorial content management interface and features like collaboration, localization, workflows, and permissions. Hygraph provides these content management capabilities, making it suitable for use cases requiring editorial workflows and content federation. Source
Hygraph offers a unique GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It enables impactful digital experiences, reduces costs, and improves efficiency. For more details, visit the product page.
Hygraph is designed for easy onboarding, even for non-technical users. For example, Top Villas launched a new project in just 2 months. Users can sign up for a free account and access documentation, tutorials, and onboarding guides. Source
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. Source
Hygraph offers onboarding sessions for enterprise customers, training resources like video tutorials, documentation, webinars, and access to Customer Success Managers for expert guidance. Source
Hygraph ensures rapid content distribution and responsiveness, reducing bounce rates and increasing conversions. Optimized performance improves user experience, engagement, and search engine rankings. For more details, visit this page.
Customers praise Hygraph for its intuitive interface and ease of use, noting that even non-technical users can start using it right away. The UI is described as logical and user-friendly for both technical and non-technical teams. Source
Written by Jesse
on Aug 09, 2020This 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:
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.
If you find errors, typos, or updates to the functionality, pull requests are always welcome!
Next: Set up Hygraph
Learn about the best CMS options for your Nuxt.js projects.
Discover why Hygraph’s Chief Product Officer migrated his B2B Product Playbook site from WordPress to Hygraph - and how structured content unlocked speed, scalability, and performance.
Dino, Staff Engineer at Hygraph and the lead behind our AI Labs initiative, walks you through how to build a working TypeScript MCP client from scratch.