Developers Guide

Setting up your development environment (Linux)

Requirements

• NodeJS & Yarn
• Golang 1.15+
• Python 3+ & Pipenv (for pre-commit hooks)
• gqlgen
• mage (can use the cmd/mage/main.go as an alternative to installing mage globally)

Frontend

Tools used

• graphql-codegen for generating typescript types from graphql queries

Directory structure

All code for the frontend can be found in the frontend directory.

src/
  App/ # folders other than shared that are directly underneath `src` are for top level modules
   index.tsx # top level modules contain the both components from `shared/components` and the apollo-graphql queries
  shared/ # code that is shared between top level modules
    components/
      Button/
        index.tsx # contains component code
        Styles.ts # contains styled component declarations
    graphql/ # contains graphql queries and mutations that are converted to typed code through `yarn generate`
    constants/ # const variables that are used in many places
    icons/ # SVG icons - all icons use a base `Icon` and are exported through the index.ts file
    utils/ # for random helpers
     accessToken.ts # tools for interacting with accessToken (the token is stored in a global variable in this file
     cache.ts # contains helper method for interacting with apollo cache
     draggables.ts # contains helper methods for interacting with draggables & droppables (react-beautiful-dnd)
     sorting.ts # the business logic for sorting tasks
     styles.ts # helper mixins and variables for styling components

Backend

Tools used

• sqlc for converting SQL query files into Golang code
• gqlgen for converting graphql schema files into Golang code

Directory structure

cmd/
  taskcafe/
    main.go # entry point for taskcafe - calls commands.Execute()
frontend/ # the React frontend code lives here
internal/ # all business logic lives here
  auth/ # code for interacting with access & refresh tokens
  commands/ # the available sub-commands taskcafe exposes
    commands.go # entry point that sets up the other commands
  db/ # database code generated by sqlc
    query/ # sql query files that are converted to go code by sqlc
  frontend/ # contains the generated frontend filesystem
  graph/ # graphql resolvers
   schema/ # contains the graphql schema declarations (which gets converted into a single schema file called schema.graphls by mage
   schema.resolver.go # contains the actual logic for all resolvers
   graph.go # contains the hasRole directory logic
  logger/ # contains custom loggers
  migrations/ # contains the generated migrations filesystem
  route/ # contains the routes for the API
   auth.go # contains the auth related routes (login, refresh, etc)
   avatar.go # contains the frontend serving code & user avatar routes
   middleware.go # contains the authentication middleware
   route.go # builds all of the routes
migrations/ # a directory of database schema migrations

GraphQL schemas

The schema for the API lives as multiple files in the internal/graph/schema/ folder.

The are converted into a single file (because gqlgen wants that) by a mage target backend:genSchema

All primary models live in _models.gql

The root Query and Mutation objects live in _root.gql

The rest of the files contain domain specific declarations. For instance the Mutations for interacting with tasks is in the task.gql file.