Client Architecture

The Client (front-end) is built with React, TypeScript, Chakra UI, and Axios.

Client Design Overview

The entire client is built with the React framework, and thus follows the React systems of component-based design.

To put it simply, each page is a component of the application, and each page also consists of different components and subcomponents. We do not have a strict design pattern that we follow par se, aside from this.

Front-end Repository Structure

Here is a top level overview of the front-end repository. We will be going over the purpose of each directory and how they relate to the client architecture.


api/ Contains modules/functions used to call back-end APIs.
assets/ Contains static assets like fonts and graphics.
components/ Contains all individual React components — .tsx files.
mockData/ Will be removed in the future. Contains mock data temporarily being used.
pages/ Contains all the “pages” of the application, wraps individual React components.
theme/ Contains the Chakra UI theme.
types/ Contains all global types — .d.ts files
App.tsx This file handles the application’s routing. Only modify to add more routes.
index.tsx DO NOT MODIFY THIS FILE. This is the entry point for React scripts startup.

Table of contents