The elegant & optimized checklist solution for flight simulation. Built with React.
-
Clone the repository:
git clone https://github.com/ToothlessOS/SimChecklists.git cd SimChecklists/SimChecklists # Where the project.json file is located
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
You can easily contribute more checklists to the project with the following steps:
- Create a new
AircraftNameChecklist.tsfile in thesrc/checklistsdirectory. The file should look like this:
import { Checklist } from "../types/checklist";
const C172Checklist: ChecklistData = {
...
};
export default C172Checklist;where ChecklistData should be structured as follows (You may also refer to C172Checklist.ts as an example):
(TIPS: Consider using a LLM to generate the checklist data structure from existing checklist documents!)
export type CheckItem = {
id: string;
action: string; // Action to perform
expected: string; // Expected state
note?: string; // Additional note for the checklist item; Displayed in smaller font under the item
section?: string;
highlight?: boolean; // Display the item red
};
export type CheckNote = {
id: string;
description: string; // Note description
section?: string;
subsection?: string;
highlight?: boolean; // Display the note in red
};
export type CheckContent = (CheckItem | CheckNote)[]; // Two types of entries are available: Item and Note
export type ChecklistData = Record<
string,
{ content: CheckContent; color: string }
>; // KEY: Checklist Section Name; VALUE: {content: CheckContent, color: string (tailwind css color class, i.e. bg-green-500)}- Add your checklist page in
src/pages/AircraftName.tsx, and add it to React Router insrc/App.tsx:
// AircraftName.tsx
import "bootstrap/dist/css/bootstrap.min.css";
import type { ReactNode } from "react";
import NavbarComp from "../components/NavbarComp";
import Checklist from "../components/Checklist";
import type { ChecklistData } from "../components/types";
import AircraftNameChecklist from "../checklists/AircraftNameChecklist.ts";
import entriesAvail from "../checklists/available";
import NavFloat from "../components/NavFloat";
import SketchPad from "../components/SketchPad";
function AircraftIdentifier(): ReactNode {
const content = Checklist as ChecklistData;
return (
<>
<NavbarComp entries={entriesAvail} />
<br />
<h1 className="text-xl font-bold text-center">The title of the checklist</h1>
<NavFloat content={content} />
<SketchPad />
<div>
<Checklist content={content} />
</div>
</>
);
}
export default AircraftIdentifier;// App.tsx
import AircraftNameChecklist from "./checklists/AircraftNameChecklist";
...
function App() {
return (
// Handling frontend routing with React Router
<Routes>
<Route path="/" element={<Home />} />
<Route path="/ref" element={<References />} />
<Route path="/C172" element={<C172 />} />
<Route path="/AircraftName" element={<AircraftNameChecklist />} />
...
</Routes>
);
}
...- Add the link to you checklist page to
./checklists/available.tsto render it on the navigation bar:
const entriesAvail = {
C172: "/C172",
AircraftName: "/AircraftName",
...
};- To uphold academic integrity, please add source of checklist in
./checklists/bib.ts:
const bib = {
"C172": "https://eastcoastaeroclub.com/wp-content/uploads/2025/08/C172S-Skyhawk-Checklist_04-August-2025.pdf"
"AircraftName": "SOURCE_URL_HERE",
...
}-
Commit and push your changes. Create a pull request to the main repository for review.
-
After approval, your checklist will be merged into the main project and deployed to the official site with CI/CD pipelines!