This box will disappear when printing mkdocs-print-site-plugin

This page has combined all site pages into one. You can export to PDF using File > Print > Save as PDF.

See also export to PDF and export to standalone HTML.

Development Docs

This documentation is rendered as a website on GitHub Pages. Any change to markdown files will be deployed after it gets merged into the main branch.

Getting Started

The site requires node v16 and npm 8 (which comes installed with node@16) to run locally, since it utilizes workspaces to structure the repo.

If you are already using the Node Version Manager (nvm) tool, you can run nvm install in the directory to get the correct version of node.

Once you have installed node, you can install the project's dependencies:

npm install

Frontend App

• Installation and setup
• Creating a new page
• Creating a component

Backend API

The backend (auth, api, database) is all managed by a separate API outside of this repo.

Automated Testing

• Integration Testing

Frontend

Frontend App Setup

The frontend uses Next to create the app.

Installation Requirements

See the Getting Started instructions for details about installing node.

Build Setup

# serve with hot reload at localhost:3000
yarn dev

If you want to see how the app will behave in production, build and run it:

# build for production (this will take a while)
yarn build
# runs the site in prod mode using the generated pages from the build-frontend step
yarn start

Pages

Create a React component in the pages directory, where the name of the file is the path a user will navigate to in the url.

In general, try to keep page logic simple. Pull any complex logic out into a component in the components directory in a folder with the same name as the route.

Components

Create a React component in the components directory. If it's a component specific to a page, nest it in a directory with the same name as the page.

Ended: Frontend

Testing

Integration Testing

Our integration tests use Cypress as our test runner.

What to test

Unlike unit tests, we really only want to test broad strokes behavior. The most common usages of the app, to ensure the functionality of the app remains unbroken.

How to Run the Tests

• Run the app
  

  npm run dev
  

• Run the tests
  

  npm run cy:run
  

Videos/Screenshots

By default, because it takes so long to process video, we have the video and screenshot capabilities turned off. If it's useful to inspect the video of what happened after the tests run, you can append this config flag to the test command:

npm run cy:run -- --config video=true,videoUploadOnPasses=true,screenshotOnRunFailure=true

Ended: Testing