Left patternRight pattern

The Hasura Super App

A fully-featured, free, & open source reference app that showcases how to leverage Hasura's superpowers to build scalable, secure, and high-performance business applications.
  • TickFully featured
  • TickOpen source
  • TickModern Stack (Next.js, TypeScript, Apollo Client)

How we built it

The Hasura Super App is a reactive event-driven 3factor application. Dig into the code to understand how to approach complex real-world scenarios using Hasura.
Architecture diagram

JWT Auth (Custom)Arrow

Learn and understand Hasura's authentication system by seeing how to write auth endpoints to handle signing JWT claims via authenticating your users with bcrypt.

Modern Stack (Next.js, TypeScript, Apollo Client)Arrow

Built on a set of technologies that you're likely to encounter or choose yourself for day-to-day development activities.

Autogenerated TypeScript GraphQL Client SDKArrow

Both the frontend and the backend of the application make extensive use of typesafe client SDK's which are autogenerated from Hasura's schema definition. This provides database/schema-driven end-to-end typesafe workflows and markedly increases productivity and developer ergonomics.

File/Image Upload, Self-Hosted S3 ServiceArrow

Many applications require object storage, for hosting and storing media objects. This is most commonly used for things like images or attachment-like file content. Minio is an OSS self-hosted S3 compatible media storage service, used via Hasura Actions to provide this functionality in the app.

Multiple Auth TypesArrow

Not every application follows a cookie-cutter auth model where only a single "user" type exists. Many times you have more than one authenticatable entity, and sometimes more than one auth mechanism. This app uses two separate auth entities -- one for regular users, and one for platform admins.

Real-world Data ModelArrow

The data model used in this application was taken from a real-world public domain dataset used for machine learning models. It was cleaned and normalized, and the existing authentic data supplemented with artificial data where we modeled new tables that didn't exist originally.

Hasura ActionsArrow

You can't build an app on CRUD alone. Every app needs business logic, and in Hasura these are integrated via either Actions (REST APIs) or Remote Schemas (GraphQL APIs). This app showcases use of Actions for integrating business logic.

Non-trivial PermissionsArrow

Several of the column/table permissions in the app contain permissions which are non-trivial. One such example: "A user may only submit, update, or delete a review for a product, if that user has previously purchased that product and it exists in their order history."

Migrations WorkflowArrow

The application source demonstrates how to use Hasura's migrations and metadata workflow to declaratively & reproducibly model your application's schema and metadata state.

Stripe IntegrationArrow

Payment processing is the backbone of revenue generation. View an example of creating and handling payments via Hasura Actions and Stripe's API (PaymentIntents) using a custom payment UI.

Why we built this app

We get asked a lot whether our users can build modern apps with complex business logic using Hasura. So we built a reference app to showcase an awesome lineup of Hasura features that enable you to build complex modern apps and move to the market faster with them!

You can also browse our case studies to see how Hasura is being used in production by companies of all sizes.

Frequently Asked Questions

Can this be used as a "Starter Kit"?
While you technically could take the code given here as the basis for your new application, you probably wouldn't want to.

This application wasn't built to be adaptable or generic, but rather to cater to one specific implementation for education purposes and to prove a point.

We and several users in our community have much better-suited resources available for starter apps, if that's what you're looking for.
What do I need to run this?
Running the application requires only Docker and Git installed.

If you want the payments/billing feature to be functional, you need to insert a genuine Stripe test or production key (the rest of the application functions fine with a fake one).

The Docker Compose file in the root of the repo starts Hasura, Next.js, Minio, and Postgres.
Where is Feature X?
For the history and background context of this reference application being built, please see the notice in the repo here.

You may find that certain features don't have examples in the codebase. At the time of writing, this application currently doesn't implement every possible Hasura feature.

Our intent is to maintain and expand it over time as resources permit, until we achieve full feature-coverage and so that there exists a canonical reference for how to do this.

Get started with Hasura in 30 Seconds

  • TickBuild apps and APIs 10x faster
  • TickBuilt-in authorization and caching
  • Tick5x-50x more performant than hand-rolled APIs