# onehandedwonder/dr-opgave-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/onehandedwonder/dr-opgave-frontend
- Repository: https://github.com/onehandedwonder/dr-opgave-frontend

## Overview

DR-Repo-Frontend is a Vue interface for signing in and managing music records. A user signs in through the app; successful authentication stores the token and triggers record loading. The app presents records with text/genre filters and sorting, and supports creating, editing, and deleting records through the records API service. The app also restores stored sign-in state on mount. The README is empty and App.vue excerpts are partial, so the graph focuses on evidenced flows; filter/sort logic remains within the app component.

Main entry points: [`DR-Repo-Frontend/src/App.vue`](https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/App.vue) (Records app), [`DR-Repo-Frontend/src/services/RecordsAPI.js`](https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/services/RecordsAPI.js) (Records service), [`DR-Repo-Frontend/src/services/Auth.js`](https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/services/Auth.js) (Auth service), [`DR-Repo-Frontend/src/main.js`](https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/main.js) (Vue bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_bootstrap["Vue bootstrap<br/>[main.js]"]
  node_app["Records app<br/>[App.vue]"]
end

subgraph group_services["API services"]
  node_auth["Auth service<br/>[Auth.js]"]
  node_records["Records service<br/>[RecordsAPI.js]"]
end

subgraph group_browser["Browser state"]
  node_storage[("Local storage")]
end

node_user(("User"))
node_authapi{{"Auth API"}}
node_recordsapi{{"Records API"}}

node_bootstrap -->|"mounts"| node_app
node_user -->|"uses"| node_app
node_app -->|"signs in/out"| node_auth
node_auth -->|"sends auth requests"| node_authapi
node_app -->|"loads and mutates"| node_records
node_records -->|"sends record requests"| node_recordsapi
node_app -->|"reads/writes session"| node_storage
node_records -->|"reads token"| node_storage

click node_bootstrap "https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/main.js"
click node_app "https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/App.vue"
click node_auth "https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/services/Auth.js"
click node_records "https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/services/RecordsAPI.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_bootstrap,node_app,node_user toneBlue
class node_auth,node_records toneAmber
class node_storage,node_authapi,node_recordsapi toneMint
```

## Components

### User interface

- [Vue bootstrap](https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/main.js): `DR-Repo-Frontend/src/main.js`
- [Records app](https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/App.vue): `DR-Repo-Frontend/src/App.vue`

### API services

- [Auth service](https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/services/Auth.js): `DR-Repo-Frontend/src/services/Auth.js`
- [Records service](https://github.com/onehandedwonder/dr-opgave-frontend/blob/main/DR-Repo-Frontend/src/services/RecordsAPI.js): `DR-Repo-Frontend/src/services/RecordsAPI.js`

### Browser state

- **Local storage**

### Other components

- **User**
- **Auth API**
- **Records API**

## Connections

- Vue bootstrap → Records app: mounts
- User → Records app: uses
- Records app → Auth service: signs in/out
- Auth service → Auth API: sends auth requests
- Records app → Records service: loads and mutates
- Records service → Records API: sends record requests
- Records app → Local storage: reads/writes session
- Records service → Local storage: reads token