# tomalaforge/angular-challenges architecture

> Architecture diagram of the GitHub repository tomalaforge/angular-challenges, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tomalaforge/angular-challenges
- Repository: https://github.com/tomalaforge/angular-challenges

## Overview

Angular Challenges is a learning repository: users browse a website for guides and challenges, then study or implement examples across Angular topics. The website routes expose challenge documentation, solution listings and diffs, and leaderboards; the repository also contains many independent sample applications. The README describes 65 challenges, while the supplied tree and source excerpts cover only a subset, so the graph represents topic collections rather than every exercise. Website page implementations and challenge internals were not sampled; their nodes use supported enclosing paths and omit uncertain wiring.

Main entry points: [`website/src/app/app.routes.ts`](https://github.com/tomalaforge/angular-challenges/blob/main/website/src/app/app.routes.ts) (Website routes), [`website/src/app/pages/landing`](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/landing) (Landing page), [`website/src/app/pages/docs`](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/docs) (Doc resolver), [`website/src/app/pages/solutions`](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/solutions) (Solutions list)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Learning website"]
  node_web_routes["Website routes<br/>[app.routes.ts]"]
  node_landing["Landing page"]
  node_doc_resolver["Doc resolver"]
  node_doc_page["Guide and challenge page"]
  node_solution_list["Solutions list"]
  node_solution_diff["Solution diff"]
  node_leaderboard["Leaderboard"]
  node_not_found["Not found page"]
end

subgraph group_angular["Angular challenges"]
  node_angular_examples["Angular examples"]
  node_crud_example["CRUD application"]
  node_routing_examples["Routing challenges"]
end

subgraph group_forms["Forms challenges"]
  node_forms_examples["Forms examples"]
  node_signal_forms["Signal forms"]
end

subgraph group_reactive["Reactive challenges"]
  node_rxjs_examples["RxJS examples"]
  node_signal_examples["Signal examples"]
end

subgraph group_other["Other challenges"]
  node_performance_examples["Performance examples"]
  node_testing_examples["Testing examples"]
  node_nx_examples["Nx examples"]
end

node_learner(("Learner"))

node_learner -->|"browses"| node_web_routes
node_web_routes -->|"loads"| node_landing
node_web_routes -->|"resolves"| node_doc_resolver
node_web_routes -->|"loads"| node_doc_page
node_web_routes -->|"loads"| node_solution_list
node_web_routes -->|"loads"| node_solution_diff
node_web_routes -->|"loads"| node_leaderboard
node_web_routes -->|"loads"| node_not_found

click node_web_routes "https://github.com/tomalaforge/angular-challenges/blob/main/website/src/app/app.routes.ts"
click node_landing "https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/landing"
click node_doc_resolver "https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/docs"
click node_doc_page "https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/docs"
click node_solution_list "https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/solutions"
click node_solution_diff "https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/solutions"
click node_leaderboard "https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/leaderboard"
click node_not_found "https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/not-found"
click node_angular_examples "https://github.com/tomalaforge/angular-challenges/tree/main/apps/angular"
click node_crud_example "https://github.com/tomalaforge/angular-challenges/tree/main/apps/angular/5-crud-application/src/app"
click node_routing_examples "https://github.com/tomalaforge/angular-challenges/tree/main/apps/angular"
click node_forms_examples "https://github.com/tomalaforge/angular-challenges/tree/main/apps/forms"
click node_signal_forms "https://github.com/tomalaforge/angular-challenges/tree/main/apps/forms/65-signal-form-edition/src/app"
click node_rxjs_examples "https://github.com/tomalaforge/angular-challenges/tree/main/apps/rxjs"
click node_signal_examples "https://github.com/tomalaforge/angular-challenges/tree/main/apps/signal"
click node_performance_examples "https://github.com/tomalaforge/angular-challenges/tree/main/apps/performance"
click node_testing_examples "https://github.com/tomalaforge/angular-challenges/tree/main/apps/testing"
click node_nx_examples "https://github.com/tomalaforge/angular-challenges/tree/main/apps/nx"

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_web_routes,node_landing,node_doc_resolver,node_doc_page,node_solution_list,node_solution_diff,node_leaderboard,node_not_found toneBlue
class node_angular_examples,node_crud_example,node_routing_examples toneAmber
class node_forms_examples,node_signal_forms toneMint
class node_rxjs_examples,node_signal_examples toneRose
class node_performance_examples,node_testing_examples,node_nx_examples,node_learner toneIndigo
```

## Components

### Learning website

- [Website routes](https://github.com/tomalaforge/angular-challenges/blob/main/website/src/app/app.routes.ts): `website/src/app/app.routes.ts`
- [Landing page](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/landing): `website/src/app/pages/landing`
- [Doc resolver](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/docs): `website/src/app/pages/docs`
- [Guide and challenge page](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/docs): `website/src/app/pages/docs`
- [Solutions list](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/solutions): `website/src/app/pages/solutions`
- [Solution diff](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/solutions): `website/src/app/pages/solutions`
- [Leaderboard](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/leaderboard): `website/src/app/pages/leaderboard`
- [Not found page](https://github.com/tomalaforge/angular-challenges/tree/main/website/src/app/pages/not-found): `website/src/app/pages/not-found`

### Angular challenges

- [Angular examples](https://github.com/tomalaforge/angular-challenges/tree/main/apps/angular): `apps/angular`
- [CRUD application](https://github.com/tomalaforge/angular-challenges/tree/main/apps/angular/5-crud-application/src/app): `apps/angular/5-crud-application/src/app`
- [Routing challenges](https://github.com/tomalaforge/angular-challenges/tree/main/apps/angular): `apps/angular`

### Forms challenges

- [Forms examples](https://github.com/tomalaforge/angular-challenges/tree/main/apps/forms): `apps/forms`
- [Signal forms](https://github.com/tomalaforge/angular-challenges/tree/main/apps/forms/65-signal-form-edition/src/app): `apps/forms/65-signal-form-edition/src/app`

### Reactive challenges

- [RxJS examples](https://github.com/tomalaforge/angular-challenges/tree/main/apps/rxjs): `apps/rxjs`
- [Signal examples](https://github.com/tomalaforge/angular-challenges/tree/main/apps/signal): `apps/signal`

### Other challenges

- [Performance examples](https://github.com/tomalaforge/angular-challenges/tree/main/apps/performance): `apps/performance`
- [Testing examples](https://github.com/tomalaforge/angular-challenges/tree/main/apps/testing): `apps/testing`
- [Nx examples](https://github.com/tomalaforge/angular-challenges/tree/main/apps/nx): `apps/nx`

### Other components

- **Learner**

## Connections

- Learner → Website routes: browses
- Website routes → Landing page: loads
- Website routes → Doc resolver: resolves
- Website routes → Guide and challenge page: loads
- Website routes → Solutions list: loads
- Website routes → Solution diff: loads
- Website routes → Leaderboard: loads
- Website routes → Not found page: loads