Code Docs

ARBITRE Docs

Frontend

📘 This page document how the frontend works and what its role is.

The frontend is build with React.

Glossary

With React, every tool is used both in development and production, with “developer mode” turned off where relevant

Autosize

Automatically adjusts textarea height. Used in most forms and in the description editor.

KaTeX

Renders LaTeX expressions.

Markdown

Markup language for creating formatted text using a plain-text editor.

Used in course, session and exercise descriptions, to let Teachers format their content.

Moment

Handles dates and time.

Monaco Editor

Monaco Editor is the text editor used in Microsoft’s Visual Studio Code.

It is used in Arbitre to preview student code and to write a test’s prefix and suffix. It provides syntax validation and colorization.

React

Front-end JavaScript library for building user interfaces based on components.

All of the frontend is built around React.

React-Keycloak

React bindings for the official Keycloak JavaScript adapter.

Used to redirect the user to the Keycloak login page, to get the returned token, and to periodically re-authenticate the user.

More about Keycloak : Authentication

Redux

JavaScript library for managing and centralizing application state.

Redux is used to store authentication credentials.

Redux Toolkit

Set of tools that contains API methods and common dependencies that are essential for building a Redux app.

Tailwind CSS

Open source CSS framework. It provides a list of "utility" CSS classes that can be used to style each element by mixing and matching.

Table of Contents