Hasura Super App

To test this application, see the Setup docs.

• Hasura Super App
  • Introduction
  • Getting Started
  • 2 Minute Video Demo
  • Application Technical Overview
  • Application Architectural Overview
    • Authentication Flow
    • Checkout Flow
    • Product Management Flow
    • GraphQL SDK
    • Hasura Migration Flow
    • 3 Factor Applications

Disclaimer/Notice: This application was a passion project for a number of engineers and other team members internally. Initial developments began long prior to v2.0 releases and before the Metadata V3 spec. As you might assume given the circumstances, there are some irregularitaries in the codebase, and small parts of the UI/design exist solely for aesthetic purposes/inspiration. Our hope was that the "big picture" product here could be useful for others both as a learning exercise or quick reference for particular featuresets. We wish and intend to continue to build out & integrate features of Hasura so that this repo can serve as a cannonical community reference for whatever your implementation/architecture question is.

Introduction

The Hasura Super App is a full featured reference application demonstrating many of the powerful featues of Hasura's GraphQL Engine. This is free and open software and you are invited to take and use as much of it as you would like, though it was designed for educational purposes.

Getting Started

tl;dr = Clone the repo, run Docker.

$ git clone https://github.com/hasura/hasura-ecommerce
$ cp .env.example .env
<modify ".env" to have your real Stripe test keys if you want checkout to work>
$ docker-compose up -d
$ cd hasura
<assuming you have Hasura CLI installed>
$ hasura seeds apply

Visit http://localhost:3000 for Next.js frontend
  Login at /account/login has default credentials "[email protected]:password"
  Login at /admin/account/login has default credentials "[email protected]:password"
Visit http://localhost:8080 for Hasura console (admin secret = "my-secret")
Visit http://localhost:9000 for Minio dashboard (login = "minio:minio123")

2 Minute Video Demo

Application Technical Overview

This example is a dockerized project with the following services: Postgres, GraphQL Engine, Minio, and Next.js. The project has one external service dependency for payment handling, which we've chosen to implement with Stripe. User authentication and authorization, cart management, order management and product information management is stored in Postgres and architected through Hasura GraphQL Engine. Minio is utilized for asset storage as it implements a common S3 interface.

Application Architectural Overview

See the Architecture Documentation.

Authentication Flow

The Authentication leverages Hasura Actions and NextJs serverless routes to handle JWT based authentication. The client sends a login mutation, the mutation is forwarded via action to a serverless function where a unique JWT is created, the token is passed back to Hasura where it is stored with client credentials, and the JWT along with helpful client information is forwarded back to the client and set as a sever-set cookie.

The login flow is similar but instead of creating a user in the action, the user is verified.

graph TD
    website[Website]
    hasura[(Postgres)]
    server[Server]
    action[[Hasura Action]]

    website -->|Signup| action
    action -.->|Handler| server
    server -.-> |Save User| hasura
    server -.-> |return token| action
    action -.-> website

Checkout Flow

• User visits the Checkout page, presses payment button
• GraphQL request is sent to Hasura to invoke custom Hasura Action
• Hasura forwards the request parameters to the Action REST API handler on the Next.js Server
• The API handler calls the Stripe API and invokes stripe.paymentIntents.create(), then returns the client_secret for the tokenized PaymentIntent
• Hasura forwards the response from the Action REST API handler to the client, as GraphQL

graph TD
    website[Website]
    server[Server - REST API]
    hasura[Hasura]
    stripe[Stripe]


    website -->|Checkout| hasura
    hasura --> |Hasura Action| server
    server --> |REST API Call| stripe
    stripe .-> |PaymentIntent Client Secret| server
    server .-> |Forward| hasura
    hasura .-> |Forward| website

Product Management Flow

Product management occurs through the /admin paths of the client application. New product images are uploaded to the Minio instance and the resource url is saved along with the product details. Again, as a client wrapper to a single GraphQL endpoint, it becomes very easy to expose additional functionality like PIM management without the need for incorporating excessive additional tooling.

GraphQL SDK

This project uses an innovative, generated, GraphQl Client SDK. For more information, see the SDK documentation.

Hasura Migration Flow

Hasura is a powerful backend provider that has offline development primitives baked in. You can define, iterate on, and deploy your migrations through the helpful CLI. For more information see the migration guide.

3 Factor Applications

This application follows the 3 Factor App principles which are composed of robust client-side state management and a centralized API layer that manages the business logic, architecture and service routing. For more information on 3 factor apps, visit the website.