Walkthrough

A guide to the basic structure of the frontend.

public

You could add assets outside the module system here (things that won't be processed by webpack), but generally you'll just leave this folder alone.

For more information, see the Create React App Docs.

index.html

The base HTML file that the site is built off of. Here, you can set the page title (shown in the browser's tab), and import fonts by adding links to stylesheets. Ultimately, a <script> tag with the compiled code will be added to this file automatically during the build process.

favicon.ico

The icon displayed in the address bar of the browser.

manifest.json

Specifies basic metadata about the application, such as its name and icons.

robots.txt

Specifies what parts of the site web robots are allowed to crawl. We allow all web crawlers to access all content. Note that web crawlers can ignore this file (it won't stop any malware).

src

App.tsx

The central application component. In it, we handle routing. That is, depending on the user's privilege level and what path the user wanted to go to, we decide which container to render.

store.ts

A Redux file where we create the application store, which holds the state tree of the application. In this file, we declare relevant types (ex. C4CState), combine our reducers, define our initial state, and apply thunk middleware.

api

Contains the logic to access data from the backend. We use Axios to make requests to our backend.

Axios documentation to be completed.

apiClient.ts

Contains the routes, types, and logic to create an ApiClient object, through which users can make PrivilegeLevel.NONE requests to the backend.

protectedApiClient.ts

Contains the routes, types, and logic to create a ProtectedApiClient object, through which users can make PrivilegeLevel.STANDARD, PrivilegeLevel.ADMIN, and PrivilegeLevel.SUPER_ADMIN requests to the backend.

assets

Contains image (under images) and text (within content.tsx) assets to be used throughout the site.

auth

Contains all logic related to the authentication system.

ducks

Contains all Redux ducks related to the authentication state of the application.

authClient.tsx

Contains the routes, types, and logic to create an AuthClient object, through which users can make auth-related requests (ex. login, logout) to the backend.

axios.ts

Creates the application AxiosInstance through which all clients make requests to the backend. Contains logic related to adding authentication headers to requests and automatically refreshing the authentication tokens.

components

Contains presentational components that are reused across the application.

containers

Contains each page–their layouts and related thunks and logic.

utils

Contains useful types, functions, and constants that are used throughout the application.