This repository hosts a collection of small React applications. The main example is a Project Management Simulation implementing Active Inference principles. A second app, Project Dynamics Simulator, explores feedback loops in projects. A third app, IT Project Sequential Decisions, demonstrates sequential decision making for IT projects. A fourth app, Portfolio State Machine, models project portfolios using a state machine. A fifth app, Stakeholder Analysis Dashboard, visualises stakeholder perspectives. A sixth app, Stakeholder Network Graph, displays stakeholder relationships as an interactive graph. A seventh app, Pareto Projects, examines pushing project value beyond the Pareto frontier. An eighth app, Market Timeline Explorer, charts potential market dynamics within the project-management services industry. A ninth app, Another IT Project Simulation, offers a training-style variant of sequential decision making. A tenth app, Decision Path Guide, uses an ontology-based questionnaire. An eleventh app, Capabilities Wiring Diagram, visualises AI model inputs, reasoning stages and output formats. A twelfth app, Copula Risk Analysis, models correlated task delays using copulas. A thirteenth app, Scope Benefits Tree, visualises how project scope outputs lead to benefits for the East West Rail upgrade. A fourteenth app, Project Controls Knowledge Graph, shows links between project management and project controls concepts. A fifteenth app, PM Software Evolution, charts how project management software has evolved over the last 20 years. All apps are built with Vite and use Recharts for charts.
- Install dependencies
npm install
- Start the development server
By default this serves the Project Management Simulation at http://localhost:3000. To work on the Project Dynamics Simulator run:
npm start
APP=project-dynamics-simulator npm start
To work on the IT Project Sequential Decisions app run:
```bash
APP=IT-project-seq-decisions npm start
To work on the Portfolio State Machine app run:
APP=portfolio-state-machine npm startTo work on the Stakeholder Analysis Dashboard app run:
APP=stakeholder-analysis-dashboard npm startTo work on the Stakeholder Network Graph app run:
APP=stakeholder-network-graph npm startTo work on the Pareto Projects app run:
APP=pareto_projects npm startTo work on the Market Timeline Explorer app run:
APP=market_timeline_explorer npm startTo work on the Another IT Project Simulation app run:
APP=Another-IT-project-simulation npm startTo work on the Decision Path Guide app run:
APP=decision-path-guide npm startTo work on the Capabilities Wiring Diagram app run:
APP=capabilities-wiring-diag npm startTo work on the Copula Risk Analysis app run:
APP=copula-risk-analysis npm startTo work on the Building Site Occupancy Simulation app run:
APP=building-site-occupancy-simulation npm startTo work on the Tag Concurrence Explorer app run:
APP=tag-concurrence-explorer npm startThe page reloads automatically when files change.
-
Run tests
npm testThis launches Vitest in watch mode. Press
qto quit the test runner. -
Create a production build
npm run build
The build script automatically iterates over every folder in
apps/and writes the optimized output underdocs/apps/<app-name>. The folder is configured for deployment to GitHub Pages. -
Preview the production build locally
npm run preview
Pass
APP=<app-name>to preview a specific build, e.g.
APP=project-dynamics-simulator npm run preview
Preview the IT Project Sequential Decisions app with:
```bash
APP=IT-project-seq-decisions npm run preview
Preview the Portfolio State Machine app with:
APP=portfolio-state-machine npm run previewPreview the Stakeholder Analysis Dashboard app with:
APP=stakeholder-analysis-dashboard npm run previewPreview the Stakeholder Network Graph app with:
APP=stakeholder-network-graph npm run previewPreview the Pareto Projects app with:
APP=pareto_projects npm run previewPreview the Market Timeline Explorer app with:
APP=market_timeline_explorer npm run previewPreview the Another IT Project Simulation app with:
APP=Another-IT-project-simulation npm run previewPreview the Decision Path Guide app with:
APP=decision-path-guide npm run previewPreview the Capabilities Wiring Diagram app with:
APP=capabilities-wiring-diag npm run previewPreview the Copula Risk Analysis app with:
APP=copula-risk-analysis npm run previewPreview the Building Site Occupancy Simulation app with:
APP=building-site-occupancy-simulation npm run previewPreview the Tag Concurrence Explorer app with:
APP=tag-concurrence-explorer npm run previewapps/<app-name>/– individual applications. Each folder contains its ownsrcandindex.html.src/common/– shared utilities likeindex.css,reportWebVitals.jsand test setup.vite.config.js– uses theAPPenvironment variable to select which app to serve or build.scripts/build-all.js– helper script run bynpm run buildto build every app found inapps/.
A workflow in .github/workflows/deploy.yml builds the project and publishes the contents of the docs directory whenever changes land on the main branch. You can run the same build locally with npm run build and open docs/index.html to verify the generated app list.
-
Create the new app folder
-
Place it under apps// with its own src directory and index.html. Shared utilities live in src/common/ so import those in your new src/index.jsx or tsx. Use the snippet below as a starting point for your
index.htmlso the app mounts correctly and links back to the index.
<!-- index.html snippet -->
<div id="root"></div>
<p><a href="../../index.html">Back to app index</a></p>-
Include a link back to the app index (Back to app index) in the HTML as shown above and noted in AGENTS.md.
-
Add a screenshot and CSV entry
-
Pick the next numeric ID and save a screenshot under
pics/using either a.pngor.webpextension. Case does not matter—the build process normalises filenames and falls back topics/blank.pngif no image is found. -
Add a corresponding row to app-index.csv, filling out the name, description, and other fields. AGENTS.md explains how each CSV # value matches a screenshot.
-
Run and test locally
- Serve the new app with APP= npm start. This is how you switch between apps during development.
- Execute npm test to run Vitest-based tests.
- Build all apps
-
When ready, run npm run build. The scripts/build-all.js script automatically iterates over every folder in apps/ and outputs optimized builds to docs/apps/.
-
Preview a specific build (optional). Use APP= npm run preview to check an individual build locally.
Following these steps will integrate your new TSX/JSX app alongside the existing ones, update the index page, and ensure the build process handles it automatically.
This project is licensed under the MIT License.