# ollieolwage/address-book-app architecture

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

- Interactive diagram: https://gitdiagram.com/ollieolwage/address-book-app
- Repository: https://github.com/ollieolwage/address-book-app

## Overview

The product is a full-stack contact manager: users browse and search contacts, add or edit validated records, and confirm deletions; the Angular client calls an Express API backed by SQLite. The graph reflects the sampled list, API, validation, and persistence code. The form’s detailed behavior was not sampled, so its service wiring is not asserted.

Main entry points: [`backend/src/routes/contacts.ts`](https://github.com/ollieolwage/address-book-app/blob/main/backend/src/routes/contacts.ts) (Contact routes), [`frontend/src/app/components/contact-list/contact-list.component.ts`](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/components/contact-list/contact-list.component.ts) (Contact list), [`frontend/src/app/app.routes.ts`](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/app.routes.ts) (Screen routes), [`backend/src/index.ts`](https://github.com/ollieolwage/address-book-app/blob/main/backend/src/index.ts) (Express app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Angular client"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_app["App shell<br/>[app.component.ts]"]
  node_routes["Screen routes<br/>[app.routes.ts]"]
  node_list["Contact list"]
  node_form["Contact form"]
  node_confirm["Delete confirmation"]
  node_service["HTTP service<br/>[contact.service.ts]"]
end

subgraph group_api["Contacts API"]
  node_api["Express app<br/>[index.ts]"]
  node_contact_routes["Contact routes<br/>[contacts.ts]"]
  node_errors["Error handler<br/>[errorHandler.ts]"]
end

subgraph group_domain["Contact domain"]
  node_validation["Contact validation<br/>[contact.ts]"]
end

subgraph group_persistence["Persistence"]
  node_sqlite[("SQLite contacts<br/>[database.ts]")]
end

node_user(("User"))

node_user -->|"uses app"| node_bootstrap
node_bootstrap -->|"bootstraps"| node_app
node_app -->|"hosts routes"| node_routes
node_routes -->|"loads list"| node_list
node_routes -->|"loads form"| node_form
node_user -->|"searches contacts"| node_list
node_list -->|"loads, deletes"| node_service
node_list -->|"requests confirmation"| node_confirm
node_user -->|"edits contact"| node_form
node_service -->|"HTTP requests"| node_api
node_api -->|"mounts routes"| node_contact_routes
node_contact_routes -->|"validates input"| node_validation
node_contact_routes -->|"reads and writes"| node_sqlite
node_api -->|"handles errors"| node_errors
node_contact_routes -->|"forwards errors"| node_errors

click node_bootstrap "https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/main.ts"
click node_app "https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/app.component.ts"
click node_routes "https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/app.routes.ts"
click node_list "https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/components/contact-list/contact-list.component.ts"
click node_form "https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/components/contact-form/contact-form.component.ts"
click node_confirm "https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/components/confirm-dialog/confirm-dialog.component.ts"
click node_service "https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/services/contact.service.ts"
click node_api "https://github.com/ollieolwage/address-book-app/blob/main/backend/src/index.ts"
click node_contact_routes "https://github.com/ollieolwage/address-book-app/blob/main/backend/src/routes/contacts.ts"
click node_errors "https://github.com/ollieolwage/address-book-app/blob/main/backend/src/middleware/errorHandler.ts"
click node_validation "https://github.com/ollieolwage/address-book-app/blob/main/backend/src/models/contact.ts"
click node_sqlite "https://github.com/ollieolwage/address-book-app/blob/main/backend/src/db/database.ts"

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_bootstrap,node_app,node_routes,node_list,node_form,node_confirm,node_service,node_user toneBlue
class node_api,node_contact_routes,node_errors toneAmber
class node_validation toneMint
class node_sqlite toneRose
```

## Components

### Angular client

- [App bootstrap](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/main.ts): `frontend/src/main.ts`
- [App shell](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/app.component.ts): `frontend/src/app/app.component.ts`
- [Screen routes](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/app.routes.ts): `frontend/src/app/app.routes.ts`
- [Contact list](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/components/contact-list/contact-list.component.ts): `frontend/src/app/components/contact-list/contact-list.component.ts`
- [Contact form](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/components/contact-form/contact-form.component.ts): `frontend/src/app/components/contact-form/contact-form.component.ts`
- [Delete confirmation](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/components/confirm-dialog/confirm-dialog.component.ts): `frontend/src/app/components/confirm-dialog/confirm-dialog.component.ts`
- [HTTP service](https://github.com/ollieolwage/address-book-app/blob/main/frontend/src/app/services/contact.service.ts): `frontend/src/app/services/contact.service.ts`

### Contacts API

- [Express app](https://github.com/ollieolwage/address-book-app/blob/main/backend/src/index.ts): `backend/src/index.ts`
- [Contact routes](https://github.com/ollieolwage/address-book-app/blob/main/backend/src/routes/contacts.ts): `backend/src/routes/contacts.ts`
- [Error handler](https://github.com/ollieolwage/address-book-app/blob/main/backend/src/middleware/errorHandler.ts): `backend/src/middleware/errorHandler.ts`

### Contact domain

- [Contact validation](https://github.com/ollieolwage/address-book-app/blob/main/backend/src/models/contact.ts): `backend/src/models/contact.ts`

### Persistence

- [SQLite contacts](https://github.com/ollieolwage/address-book-app/blob/main/backend/src/db/database.ts): `backend/src/db/database.ts`

### Other components

- **User**

## Connections

- User → App bootstrap: uses app
- App bootstrap → App shell: bootstraps
- App shell → Screen routes: hosts routes
- Screen routes → Contact list: loads list
- Screen routes → Contact form: loads form
- User → Contact list: searches contacts
- Contact list → HTTP service: loads, deletes
- Contact list → Delete confirmation: requests confirmation
- User → Contact form: edits contact
- HTTP service → Express app: HTTP requests
- Express app → Contact routes: mounts routes
- Contact routes → Contact validation: validates input
- Contact routes → SQLite contacts: reads and writes
- Express app → Error handler: handles errors
- Contact routes → Error handler: forwards errors