E-commerce App With YugabyteDB and Hasura GraphQL

This is a comprehensive (real-world) e-commerce application that was originially developed by the Hasura team. The original version of the app that uses PostgreSQL as a database and supports only the on-prem deployment option of Hasura. This repository adds instructions explaining how to start the app with YugabyteDB, with no code changes!

• Hasura and Yugabyte E-Commerce Application
  • Prerequisite
  • Setup Project
  • Run Application Locally
  • Run Application in Cloud
  • Application Architectural Overview
    • Authentication Flow
    • Checkout Flow
    • Product Management Flow
    • GraphQL SDK
    • Hasura Migration Flow
    • 3 Factor Applications
  • Clear Demo Resources

Prerequisite

1. Hasura CLI installed. Instructions here.
2. (Optional) Stripe Secret and Publishable keys. The account doesn't need to be verified as no transactions will be happening. Instructions here.
3. Local Deployments:
   • Docker and Docker Compose installed. Install instructions.
4. Cloud Deploymets:
   • Hasura Cloud Instance/Project. Insturctions here
   • Yugabyte Cloud Instance. Instructions here

Setup Project

1. Clone the project:

   git clone /~https://github.com/dmagda/hasura-ecommerce

Run Application Locally

Follow these steps to start the application in a local environment.

Run Application in Cloud

Follow these steps to start the application in the cloud.

Application Architectural Overview

• An architecure of the on-prem/local deployment.
• An architecture of the cloud native deployment.

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

Loading

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

Loading

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.

Clear Demo Resources

Use the script below to clear the demo resources such as created containers and volumes:

    ./clear-demo-resources.sh