# mjunhaochen/contact-manager architecture

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

- Interactive diagram: https://gitdiagram.com/mjunhaochen/contact-manager
- Repository: https://github.com/mjunhaochen/contact-manager

## Overview

Contact Manager is a Vue app for browsing and maintaining a contact list. Users view, search, and filter contacts, add or edit validated records, and delete or favorite them; mutations persist in browser localStorage. The sampled source confirms the router, view-to-store actions, and persistence calls. The README also documents these capabilities. The HTML entry file and any unsampled implementation details were not provided, so they are not mapped.

Main entry points: [`src/router/index.js`](https://github.com/mjunhaochen/contact-manager/blob/main/src/router/index.js) (Route Dispatch), [`src/views/Home.vue`](https://github.com/mjunhaochen/contact-manager/blob/main/src/views/Home.vue) (Browse Contacts), [`src/store/contacts.js`](https://github.com/mjunhaochen/contact-manager/blob/main/src/store/contacts.js) (Contact Store), [`src/views/AddContact.vue`](https://github.com/mjunhaochen/contact-manager/blob/main/src/views/AddContact.vue) (Add Contact)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_main["App Bootstrap<br/>[main.js]"]
  node_shell["Navigation Shell<br/>[App.vue]"]
  node_router["Route Dispatch<br/>[index.js]"]
end

subgraph group_contacts["Contact Workflows"]
  node_home["Browse Contacts<br/>[Home.vue]"]
  node_card["Contact Card<br/>[ContactCard.vue]"]
  node_add["Add Contact<br/>[AddContact.vue]"]
  node_edit["Edit Contact<br/>[EditContact.vue]"]
  node_toast["Validation Toast<br/>[Toast.vue]"]
end

subgraph group_state["Contact State"]
  node_store["Contact Store<br/>[contacts.js]"]
end

node_user(("User"))
node_storage[("Browser Storage")]

node_user -->|"uses"| node_shell
node_main -->|"mounts"| node_shell
node_main -->|"installs"| node_router
node_shell -->|"renders routes"| node_router
node_router -->|"dispatches"| node_home
node_router -->|"dispatches"| node_add
node_router -->|"dispatches"| node_edit
node_home -->|"loads, deletes, favorites"| node_store
node_home -->|"renders"| node_card
node_card -->|"emits actions"| node_home
node_add -->|"adds contact"| node_store
node_edit -->|"loads, updates"| node_store
node_add -->|"shows errors"| node_toast
node_edit -->|"shows errors"| node_toast
node_store -->|"reads, writes"| node_storage

click node_main "https://github.com/mjunhaochen/contact-manager/blob/main/src/main.js"
click node_shell "https://github.com/mjunhaochen/contact-manager/blob/main/src/App.vue"
click node_router "https://github.com/mjunhaochen/contact-manager/blob/main/src/router/index.js"
click node_home "https://github.com/mjunhaochen/contact-manager/blob/main/src/views/Home.vue"
click node_card "https://github.com/mjunhaochen/contact-manager/blob/main/src/components/ContactCard.vue"
click node_add "https://github.com/mjunhaochen/contact-manager/blob/main/src/views/AddContact.vue"
click node_edit "https://github.com/mjunhaochen/contact-manager/blob/main/src/views/EditContact.vue"
click node_toast "https://github.com/mjunhaochen/contact-manager/blob/main/src/components/Toast.vue"
click node_store "https://github.com/mjunhaochen/contact-manager/blob/main/src/store/contacts.js"

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_main,node_shell,node_router,node_user toneBlue
class node_home,node_card,node_add,node_edit,node_toast,node_storage toneAmber
class node_store toneMint
```

## Components

### Application Shell

- [App Bootstrap](https://github.com/mjunhaochen/contact-manager/blob/main/src/main.js): `src/main.js`
- [Navigation Shell](https://github.com/mjunhaochen/contact-manager/blob/main/src/App.vue): `src/App.vue`
- [Route Dispatch](https://github.com/mjunhaochen/contact-manager/blob/main/src/router/index.js): `src/router/index.js`

### Contact Workflows

- [Browse Contacts](https://github.com/mjunhaochen/contact-manager/blob/main/src/views/Home.vue): `src/views/Home.vue`
- [Contact Card](https://github.com/mjunhaochen/contact-manager/blob/main/src/components/ContactCard.vue): `src/components/ContactCard.vue`
- [Add Contact](https://github.com/mjunhaochen/contact-manager/blob/main/src/views/AddContact.vue): `src/views/AddContact.vue`
- [Edit Contact](https://github.com/mjunhaochen/contact-manager/blob/main/src/views/EditContact.vue): `src/views/EditContact.vue`
- [Validation Toast](https://github.com/mjunhaochen/contact-manager/blob/main/src/components/Toast.vue): `src/components/Toast.vue`

### Contact State

- [Contact Store](https://github.com/mjunhaochen/contact-manager/blob/main/src/store/contacts.js): `src/store/contacts.js`

### Other components

- **User**
- **Browser Storage**

## Connections

- User → Navigation Shell: uses
- App Bootstrap → Navigation Shell: mounts
- App Bootstrap → Route Dispatch: installs
- Navigation Shell → Route Dispatch: renders routes
- Route Dispatch → Browse Contacts: dispatches
- Route Dispatch → Add Contact: dispatches
- Route Dispatch → Edit Contact: dispatches
- Browse Contacts → Contact Store: loads, deletes, favorites
- Browse Contacts → Contact Card: renders
- Contact Card → Browse Contacts: emits actions
- Add Contact → Contact Store: adds contact
- Edit Contact → Contact Store: loads, updates
- Add Contact → Validation Toast: shows errors
- Edit Contact → Validation Toast: shows errors
- Contact Store → Browser Storage: reads, writes