Skip to content

Small full-stack restaurant reviews app, created for learning. Built on postgres + hasura + node + nextjs + docker

Notifications You must be signed in to change notification settings

jackyef/fullstack-react-graphql-example

Repository files navigation

Example Hasura GraphQL + Node + Next.js app

This repo is an example of a fullstack application using Hasura GraphQL engine with some role-based authorization. This is by no means a complete app, it serves as a weekend project to play around with Hasura.

Tools

  • TypeScript
  • Next
  • React + ChakraUI
  • Express
  • Redis
  • GitHub as image host
  • Hasura Graphql Engine
  • Postgres
  • Docker
  • undraw.co illustrations

At a glance

app

Developing

  1. Install dependencies

    yarn install
  2. Setup .env file for backend

    • Create a .env.dev file, use .env.example as reference
    • GITHUB_IMAGE_REPO_OWNER, GITHUB_IMAGE_REPO_NAME, and GITHUB_ACCESS_TOKEN are needed for image uploads (when creating a new restaurant)
      • The app upload images into a github repo. See this repo for example
    • GOOGLE_OAUTH_CLIENTID and GOOGLE_OAUTH_SECRET are needed for google sign-in to work. Refer to https://developers.google.com/identity/sign-in/web/sign-in on how to get them
  3. Run the backend

    docker-compose up # start everything up

    Note that if there are changes to Dockerfile.dev or new packages installed, a rebuild is necessary.

    docker-compose up --build server

    If you encountered an error that says "Unhandled exception: Filesharing has been cancelled", you need to allow Docker file sharing on your project's directory.

  4. Run the frontend

    cp ./client/env.example ./client/.env # prepare the .env file for frontend app
    
    yarn dev # start the frontend dev server on port 3000
  5. Setup Postgres DB tables and Hasura graphql engine metadata

    yarn global add hasura-cli # hasura-cli is needed to perform this
    
    cd hasura
    hasura migrate apply
    hasura metadata apply

Architecture

image

Notes

  • This example only supports google sign-in. If you want another sign-in method you can add it on your own.
  • To add restaurants, you need to manually set a user's role to be owner. To do this, edit the record directly from hasura console http://localhost:8080/console
  • Everytime a new user signs up, the authentication service insert a new user to the DB. Currently, the authentication service do this via GQL mutation. It could write directly to DB if you want to do so.
  • The GQL engine will call the authentication service to authenticate any incoming requests. If you don't want this, you can modify it so the auth service issues a JWT token to the frontend instead. Read more about this in hasura docs
  • If you want to use this on production, you would probably want to do some codesplitting in the frontend app. I neglected it because I just wanted to mostly learn about Hasura 😃

About

Small full-stack restaurant reviews app, created for learning. Built on postgres + hasura + node + nextjs + docker

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published