# ncool89/skills-create-applications-with-the-copilot-cli architecture

> Architecture diagram of the GitHub repository ncool89/skills-create-applications-with-the-copilot-cli, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ncool89/skills-create-applications-with-the-copilot-cli
- Repository: https://github.com/ncool89/skills-create-applications-with-the-copilot-cli

## Overview

1. **Repository purpose**
   - This is a GitHub Skills training repository, not a production application.
   - The architecture is split between a tiny JavaScript codebase and a set of GitHub-hosted exercise orchestration assets.

2. **Core application logic**
   - `src/calculator.js` is the main domain module.
   - It contains the calculator behavior the exercise is built around, so this is the only real runtime/business logic boundary in the repo.

3. **Test layer**
   - `src/tests/calculator.test.js` is the verification boundary for the code.
   - The test suite exercises the calculator module and is the primary quality gate for changes.

4. **Node.js project boundary**
   - `package.json` defines the JavaScript runtime contract: dependencies, scripts, and test execution entry points.
   - The repository is therefore centered on a Node.js toolchain rather than a server, UI, or service architecture.

5. **Exercise orchestration in GitHub Actions**
   - `.github/workflows/0-start-exercise.yml` and `1-step.yml` through `4-step.yml` encode the staged learning flow.
   - These workflows likely enforce progression, validate each step, and guide the learner through the exercise lifecycle.

6. **Instruction/content subsystem**
   - `.github/steps/` contains the step-by-step exercise content.
   - `.github/instructions/` contains agent or copilot CLI guidance used to steer the learner through the task.
   - This is a documentation/control plane separate from the code under `src/`.

7. **Issue-driven interaction**
   - `.github/ISSUE_TEMPLATE/feature_request.md` suggests the exercise is anchored around GitHub Issues for feedback or task initiation.
   - The repo uses GitHub’s collaboration features as part of the learning workflow, not as an application dependency.

8. **Developer environment**
   - `.devcontainer/` provides a reproducible development environment for Codespaces or local container-based editing.
   - `postCreate.sh` and `postStart.sh` are lifecycle hooks that prepare and start the workspace environment.

9. **Assets and presentation**
   - `images/` and the README’s embedded badges/images are presentation-only assets.
   - `README.md` is a completion/celebration page, indicating the exercise has been finished.

10. **Data flow**
   - The practical flow is: edit calculator code in `src/`, run tests, and have GitHub Actions validate step completion.
   - There is no evidence of persistent storage, external APIs, messaging, or network-backed runtime services.

11. **Architectural boundaries**
   - Code execution stays local to the Node.js project.
   - Progress tracking and instruction delivery happen in GitHub infrastructure via workflows, steps, and issues.
   - Environment setup is isolated in the devcontainer layer.

12. **Overall structure**
   - Think of this repo as three layers: `src/` for the small application, `.github/` for exercise automation and guidance, and `.devcontainer/` for environment reproducibility.
   - That separation is the key architectural feature to capture in a diagram.

Main entry points: [`src/tests/calculator.test.js`](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/src/tests/calculator.test.js) (Calculator test), [`.github/steps/1-step.md`](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/steps/1-step.md) (Step guides), [`package.json`](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/package.json) (package.json), [`.github/workflows/4-step.yml`](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/4-step.yml) (Step 4)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_src["Node.js app"]
  node_package_json["package.json<br/>node manifest<br/>[package.json]"]
  node_calculator["Calculator<br/>domain module<br/>[calculator.js]"]
  node_calculator_test["Calculator test<br/>test suite<br/>[calculator.test.js]"]
end

subgraph group_group_github["GitHub exercise plane"]
  node_wf_start["Start flow<br/>workflow"]
  node_wf_step1["Step 1<br/>workflow<br/>[1-step.yml]"]
  node_wf_step2["Step 2<br/>workflow<br/>[2-step.yml]"]
  node_wf_step3["Step 3<br/>workflow<br/>[3-step.yml]"]
  node_wf_step4["Step 4<br/>workflow<br/>[4-step.yml]"]
  node_steps_content["Step guides<br/>instruction content<br/>[1-step.md]"]
  node_review_step["Review guide<br/>instruction content<br/>[x-review.md]"]
  node_copilot_instr["Copilot guide<br/>agent instructions"]
  node_issue_template["Issue template<br/>[feature_request.md]"]
end

subgraph group_group_devcontainer["Dev environment"]
  node_devcontainer_json["Devcontainer<br/>environment config<br/>[devcontainer.json]"]
  node_post_create["Post-create<br/>env hook<br/>[postCreate.sh]"]
  node_post_start["Post-start<br/>env hook<br/>[postStart.sh]"]
end

subgraph group_group_docs["Presentation"]
  node_readme["README<br/>completion doc<br/>[README.md]"]
  node_images["Images<br/>asset set"]
end

node_package_json -->|"runs"| node_calculator
node_package_json -->|"tests"| node_calculator_test
node_calculator_test -->|"verifies"| node_calculator
node_wf_start -->|"boots"| node_steps_content
node_wf_start -.->|"tracks"| node_issue_template
node_wf_step1 -->|"checks"| node_calculator_test
node_wf_step2 -->|"checks"| node_calculator_test
node_wf_step3 -->|"checks"| node_calculator_test
node_wf_step4 -->|"checks"| node_calculator_test
node_wf_step1 -->|"guides"| node_steps_content
node_wf_step2 -->|"guides"| node_steps_content
node_wf_step3 -->|"guides"| node_steps_content
node_wf_step4 -->|"closes"| node_review_step
node_copilot_instr -.->|"aligns"| node_steps_content
node_devcontainer_json -->|"hooks"| node_post_create
node_devcontainer_json -->|"hooks"| node_post_start
node_post_create -->|"prepares"| node_package_json
node_post_start -->|"activates"| node_package_json
node_readme -.->|"embeds"| node_images
node_readme -.->|"references"| node_wf_step4

click node_package_json "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/package.json"
click node_calculator "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/src/calculator.js"
click node_calculator_test "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/src/tests/calculator.test.js"
click node_wf_start "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/0-start-exercise.yml"
click node_wf_step1 "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/1-step.yml"
click node_wf_step2 "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/2-step.yml"
click node_wf_step3 "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/3-step.yml"
click node_wf_step4 "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/4-step.yml"
click node_steps_content "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/steps/1-step.md"
click node_review_step "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/steps/x-review.md"
click node_copilot_instr "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/instructions/copilot-cli-ref.instructions.md"
click node_issue_template "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/ISSUE_TEMPLATE/feature_request.md"
click node_devcontainer_json "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.devcontainer/devcontainer.json"
click node_post_create "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.devcontainer/postCreate.sh"
click node_post_start "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.devcontainer/postStart.sh"
click node_readme "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/README.md"
click node_images "https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/tree/main/images"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_package_json,node_calculator,node_calculator_test toneBlue
class node_wf_start,node_wf_step1,node_wf_step2,node_wf_step3,node_wf_step4,node_steps_content,node_review_step,node_copilot_instr,node_issue_template toneAmber
class node_devcontainer_json,node_post_create,node_post_start toneMint
class node_readme,node_images toneRose
```

## Components

### Node.js app

Core runtime and verification boundary

- [package.json](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/package.json): node manifest · Defines scripts, dependencies, and the Node.js runtime contract · `package.json`
- [Calculator](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/src/calculator.js): domain module · Main application logic for the exercise · `src/calculator.js`
- [Calculator test](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/src/tests/calculator.test.js): test suite · Primary verification boundary for calculator behavior · `src/tests/calculator.test.js`

### GitHub exercise plane

Workflows, instructions, and step content that drive the training flow

- [Start flow](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/0-start-exercise.yml): workflow · Initial exercise orchestration in GitHub Actions · `.github/workflows/0-start-exercise.yml`
- [Step 1](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/1-step.yml): workflow · First staged exercise validation workflow · `.github/workflows/1-step.yml`
- [Step 2](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/2-step.yml): workflow · Second staged exercise validation workflow · `.github/workflows/2-step.yml`
- [Step 3](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/3-step.yml): workflow · Third staged exercise validation workflow · `.github/workflows/3-step.yml`
- [Step 4](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/workflows/4-step.yml): workflow · Final staged exercise validation workflow · `.github/workflows/4-step.yml`
- [Step guides](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/steps/1-step.md): instruction content · Markdown step content that guides the learner through the exercise · `.github/steps/1-step.md`
- [Review guide](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/steps/x-review.md): instruction content · Final review or wrap-up guidance for the exercise · `.github/steps/x-review.md`
- [Copilot guide](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/instructions/copilot-cli-ref.instructions.md): agent instructions · Instructions for the Copilot CLI or agent workflow · `.github/instructions/copilot-cli-ref.instructions.md`
- [Issue template](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.github/ISSUE_TEMPLATE/feature_request.md): issue template · GitHub issue entry point for feedback or task initiation · `.github/ISSUE_TEMPLATE/feature_request.md`

### Dev environment

Containerized workspace setup and lifecycle hooks

- [Devcontainer](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.devcontainer/devcontainer.json): environment config · Reproducible workspace definition for Codespaces or local containers · `.devcontainer/devcontainer.json`
- [Post-create](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.devcontainer/postCreate.sh): env hook · Workspace setup hook run after container creation · `.devcontainer/postCreate.sh`
- [Post-start](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/.devcontainer/postStart.sh): env hook · Workspace startup hook run when the container begins · `.devcontainer/postStart.sh`

### Presentation

Repository-facing documentation and visual assets

- [README](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/blob/main/README.md): completion doc · Celebration or completion-facing repository overview · `README.md`
- [Images](https://github.com/ncool89/skills-create-applications-with-the-copilot-cli/tree/main/images): asset set · Presentation assets used by the README and repository pages · `images`

## Connections

- package.json → Calculator: runs · Node scripts and runtime config execute the application module
- package.json → Calculator test: tests · Package scripts invoke the verification suite
- Calculator test → Calculator: verifies · Tests exercise the calculator behavior
- Start flow → Step guides: boots · The first workflow begins the guided exercise flow
- Start flow → Issue template: tracks · Exercise entry and feedback can originate through GitHub issues
- Step 1 → Calculator test: checks · Step workflows validate progress against the code and tests
- Step 2 → Calculator test: checks · Step workflows validate progress against the code and tests
- Step 3 → Calculator test: checks · Step workflows validate progress against the code and tests
- Step 4 → Calculator test: checks · Step workflows validate progress against the code and tests
- Step 1 → Step guides: guides · Each stage is paired with step-by-step instructions
- Step 2 → Step guides: guides · Each stage is paired with step-by-step instructions
- Step 3 → Step guides: guides · Each stage is paired with step-by-step instructions
- Step 4 → Review guide: closes · Final workflow leads into review or completion guidance
- Copilot guide → Step guides: aligns · Agent instructions support the guided exercise material
- Devcontainer → Post-create: hooks · Container definition wires workspace initialization
- Devcontainer → Post-start: hooks · Container definition wires workspace startup behavior
- Post-create → package.json: prepares · Setup hook readies the Node project environment
- Post-start → package.json: activates · Startup hook helps make the project ready to use
- README → Images: embeds · Completion page uses repository presentation assets
- README → Step 4: references · Repository completion content reflects the staged exercise outcome