# jaoko-ai/urlshortener architecture

> Architecture diagram of the GitHub repository jaoko-ai/urlshortener, 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/jaoko-ai/urlshortener
- Repository: https://github.com/jaoko-ai/urlshortener

## Overview

This repository is a URL-shortening application with a Vue web interface and an ASP.NET Core API. The main visible workflow is entering a URL in the home view, posting it to the API, and displaying the returned short URL; the API’s URL-creation implementation was not sampled, so that endpoint connection is supported by the frontend request but its internal processing is not inferred. The sampled query endpoint looks up a short code, increments clicks, records request metadata, and persists analytics. Delete, stats, and authentication controllers are present in the tree, but their behavior and wiring are not established by the samples.

Main entry points: [`url-shortener-api/Program.cs`](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Program.cs) (ASP.NET API), [`url-shortener-api/Controllers/query.cs`](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/query.cs) (Short-code query), [`url-shortener-api/database.cs`](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/database.cs) (EF context), [`url-shortener-web/src/router/index.ts`](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/router/index.ts) (View router)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web interface"]
  node_webapp["Vue app<br/>[main.ts]"]
  node_shell["App shell<br/>[App.vue]"]
  node_router["View router<br/>[index.ts]"]
  node_home["Shorten URL<br/>[HomeView.vue]"]
  node_authview["Auth view<br/>[AuthView.vue]"]
end

subgraph group_api["API endpoints"]
  node_api["ASP.NET API<br/>[Program.cs]"]
  node_urls["URL management<br/>[Urls.cs]"]
  node_query["Short-code query<br/>[query.cs]"]
  node_delete["URL deletion<br/>[Delete.cs]"]
  node_stats["Click statistics<br/>[Stats.cs]"]
  node_auth["Registration<br/>[auth.cs]"]
end

subgraph group_data["Persistence and domain"]
  node_codec["Base62 codec<br/>[Utilities.cs]"]
  node_context["EF context<br/>[database.cs]"]
  node_records["URL and click records<br/>[database.cs]"]
  node_users["User entity<br/>[user.cs]"]
end

node_visitor(("Visitor"))
node_postgres[("PostgreSQL")]
node_browser(("Browser request"))

node_visitor -->|"uses"| node_webapp
node_webapp -->|"mounts"| node_shell
node_shell -->|"renders routes"| node_router
node_router -->|"loads view"| node_home
node_router -->|"loads view"| node_authview
node_visitor -->|"enters URL"| node_home
node_home -->|"posts shorten request"| node_browser
node_browser -->|"HTTP request"| node_api
node_api -->|"maps controllers"| node_urls
node_api -->|"maps controllers"| node_query
node_api -->|"maps controllers"| node_delete
node_api -->|"maps controllers"| node_stats
node_api -->|"maps controllers"| node_auth
node_api -->|"configures EF"| node_context
node_query -->|"queries and saves"| node_context
node_context -->|"tracks entities"| node_records
node_context -->|"uses Npgsql"| node_postgres
node_query -->|"reads and updates"| node_records
node_query -->|"adds click record"| node_records
node_auth -->|"uses user model"| node_users
node_urls --> node_codec

click node_webapp "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/main.ts"
click node_shell "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/App.vue"
click node_router "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/router/index.ts"
click node_home "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/views/HomeView.vue"
click node_authview "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/views/AuthView.vue"
click node_api "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Program.cs"
click node_urls "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/Urls.cs"
click node_query "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/query.cs"
click node_delete "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/Delete.cs"
click node_stats "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/Stats.cs"
click node_auth "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/auth.cs"
click node_codec "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Utilities.cs"
click node_context "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/database.cs"
click node_records "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/database.cs"
click node_users "https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Entities/user.cs"

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_webapp,node_shell,node_router,node_home,node_authview,node_browser toneBlue
class node_api,node_urls,node_query,node_delete,node_stats,node_auth,node_postgres toneAmber
class node_codec,node_context,node_records,node_users toneMint
class node_visitor toneIndigo
```

## Components

### Web interface

- [Vue app](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/main.ts): `url-shortener-web/src/main.ts`
- [App shell](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/App.vue): `url-shortener-web/src/App.vue`
- [View router](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/router/index.ts): `url-shortener-web/src/router/index.ts`
- [Shorten URL](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/views/HomeView.vue): `url-shortener-web/src/views/HomeView.vue`
- [Auth view](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-web/src/views/AuthView.vue): `url-shortener-web/src/views/AuthView.vue`

### API endpoints

- [ASP.NET API](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Program.cs): `url-shortener-api/Program.cs`
- [URL management](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/Urls.cs): `url-shortener-api/Controllers/Urls.cs`
- [Short-code query](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/query.cs): `url-shortener-api/Controllers/query.cs`
- [URL deletion](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/Delete.cs): `url-shortener-api/Controllers/Delete.cs`
- [Click statistics](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/Stats.cs): `url-shortener-api/Controllers/Stats.cs`
- [Registration](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Controllers/auth.cs): `url-shortener-api/Controllers/auth.cs`

### Persistence and domain

- [Base62 codec](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Utilities.cs): `url-shortener-api/Utilities.cs`
- [EF context](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/database.cs): `url-shortener-api/database.cs`
- [URL and click records](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/database.cs): `url-shortener-api/database.cs`
- [User entity](https://github.com/jaoko-ai/urlshortener/blob/main/url-shortener-api/Entities/user.cs): `url-shortener-api/Entities/user.cs`

### Other components

- **Visitor**
- **PostgreSQL**
- **Browser request**

## Connections

- Visitor → Vue app: uses
- Vue app → App shell: mounts
- App shell → View router: renders routes
- View router → Shorten URL: loads view
- View router → Auth view: loads view
- Visitor → Shorten URL: enters URL
- Shorten URL → Browser request: posts shorten request
- Browser request → ASP.NET API: HTTP request
- ASP.NET API → URL management: maps controllers
- ASP.NET API → Short-code query: maps controllers
- ASP.NET API → URL deletion: maps controllers
- ASP.NET API → Click statistics: maps controllers
- ASP.NET API → Registration: maps controllers
- ASP.NET API → EF context: configures EF
- Short-code query → EF context: queries and saves
- EF context → URL and click records: tracks entities
- EF context → PostgreSQL: uses Npgsql
- Short-code query → URL and click records: reads and updates
- Short-code query → URL and click records: adds click record
- Registration → User entity: uses user model
- URL management → Base62 codec