core ModuleThe core module includes pages which give site specific as well as general organization information. This module also contains components to provide cohesive formatting across the site.
core/
├── components/
│ ├── Aside.tsx
│ ├── BaseLayoutAuthenticated.tsx
│ ├── BaseLayoutUnauthenticated.tsx
│ ├── Footer.tsx
│ ├── Header.tsx
│ ├── HeaderUnauthenticated.tsx
│ └── PageHead.tsx
├── pages/
│ ├── AboutPage.tsx
│ ├── front/
│ │ ├── CareersPage.tsx
│ │ ├── Contact.tsx
│ │ ├── HowItWorks.tsx
│ │ ├── Investors.tsx
│ │ ├── Services.Tsx
│ │ └── TeamPage.tsx
│ └── StatusPage.tsx
├── services/
│ └── coreApi.ts
└── types.ts
Set-Cookie header.cors_layer middleware in back end which restricts the ability to load resources to specified originscsrf_layer middleware in back end which protects against malicious requests by associating a unique random token for every form in a given sessionBaseLayoutAuthenticated.tsxFormat for a basic uniform authenticated page layout containing branding, fonts, styles, and other components such as the header, footer, and a container for the primary page content.
BaseLayoutUnauthenticated.tsxFormat for a basic uniform unauthenticated page layout containing branding, fonts, styles, and other components such as the header, footer, and a container for the primary page content.
Footer.tsxFormat for a basic uniform footer that includes links to the privacy policy and terms of service.
Header.tsxFormat for a basic uniform header that includes links to the catalog, rentals, subscription options, settings, and user information.
HeaderUnauthenticated.tsxFormat for a basic uniform header that includes links to subscription options, and a how it works page.
CareersPage.tsxBaseLayoutUnauthenticated element, with HeaderUnauthenticated and Footer elementsContact.tsxBaseLayoutUnauthenticated element, with HeaderUnauthenticated and Footer elementsHowItWorks.tsxBaseLayoutUnauthenticated element, with HeaderUnauthenticated and Footer elementsInvestors.tsxBaseLayoutUnauthenticated element, with HeaderUnauthenticated and Footer elementsServices.tsxBaseLayoutUnauthenticated element, with HeaderUnauthenticated, TeamPage, and Footer elementsTeamPage.tsxBaseLayoutUnauthenticated element, with HeaderUnauthenticated and Footer elementsAboutPage.tsxStatusPage.tsximport React, { useEffect, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import PageHead from "./PageHead";
import Header from "./Header";
import Footer from "./Footer";
import { Helmet } from "react-helmet";
import { getSystemStatus } from "../services/coreApi";
import type { SystemStatus } from "../services/coreApi";
import BaseLayout from "../../components/BaseLayoutUnauthenticated";
import HeaderUnauthenticated from "../../components/HeaderUnauthenticated";
import { TeamPage } from "./TeamPage";
React: Library of React utilitiesuseEffect: Accepts a function that contains imperative, possibly effectful codeuseState: Returns a stateful value, and a function to update itLink: A progressively enhanced <a href> wrapper to enable navigation with client-side routing.useLocation: Returns the current Location. This can be useful if you'd like to perform some side effect whenever it changes.PageHead: Element that displays the page titleHeader: Element that contains header contentsFooter: Element that contains footer contentsHelmet: Enables modification of document head from React componentsgetSystemStatus: Fetches system status elementsSystemStatus: Interface which holds relevant status informationBaseLayout: Element providing universal basic layoutHeaderUnauthenticated: Element that contains unauthenticated header contentsTeamPage: Page element for team pageconst location = useLocation();
const isActive = (path: string) => location.pathname === path;
const isOverviewOpen = ["/admin_console", "/financials_console", "/network_console"].includes(location.pathname);
const isAuthenticated = true; // TODO: replace with real auth check
const currentUser = {
username: "johndoe",
profilePic: "/static/images/default-user.png",
isAdmin: true,
isVendor: true,
rental: {
id: 42,
title: "Puzzle Box of Doom",
image: "https://api.iconify.design/mdi:puzzle-outline.svg?color=%23999",
dueDate: "Aug 01, 2025",
overdue: false,
},
};
const [status, setStatus] = useState<SystemStatus | null>(null);
const [error, setError] = useState("");
const res = await fetch("/core/status");
components/Aside.tsxlocation: Holds the current locationisActive: Tracks active status based on the existence of paths and displays active pathsisOverviewOpen: Tracks status of overviewcomponents/Header.tsxisAuthenticated: Tracks current state of user authentication (currently a placeholder)currentUser: reference for user profile containing relevant profile informationpages/StatusPage.tsx[status, setStatus]: Tracks status elements[error, setError]: Tracks error status and displays message on errorservices/coreApi.tsres: Fetches status from coretype.tsexport interface VersionInfo {
version: string;
buildTime: string;
}
export interface ApiError {
error: string;
}
components/BaseLayoutAuthenticated.tsx, components/BaseLayoutUnauthenticated.tsxinterface BaseLayoutProps {
title?: string;
children: React.ReactNode;
description?: string;
keywords?: string;
scripts?: React.ReactNode;
}
components/PageHead.tsxinterface PageHeadProps {
title?: string;
}
services/coreApi.ts:export interface SystemStatus {
status: "ok" | "error";
version: string;
timestamp: string;
}
pages/AboutPage.tsxAboutPage()
pages/StatusPage.tsxStatusPage()
services/coreApi.tsgetSystemStatus()
/core/status, returns json string if successfulPromise<SystemStatus>isAuthenticated in Header.tsx is currently a placeholder and needs to be replaced with logic to determine authentication status