# kraafter/simpleshortener-svelte architecture

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

- Interactive diagram: https://gitdiagram.com/kraafter/simpleshortener-svelte
- Repository: https://github.com/kraafter/simpleshortener-svelte

## Overview

This SvelteKit link shortener lets visitors browse stored links, create or delete short links with an access key, and resolve a slug to its destination. The home page lists links and submits management forms; its server actions hash access keys and call the add/delete APIs, which validate requests and update Redis. Slug pages look up destinations through the get API and display a redirect. The README documents Redis/Upstash configuration and self-hosting. The sampled sources show these calls; alert pages are grouped because their individual components are simple and their redirects are visible in the server actions.

Main entry points: [`src/routes/+page.server.ts`](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/%2Bpage.server.ts) (Form actions), [`src/routes/+page.svelte`](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/%2Bpage.svelte) (Home page), [`src/routes/api/add/+server.ts`](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/add/%2Bserver.ts) (Add API), [`src/routes/api/delete/+server.ts`](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/delete/%2Bserver.ts) (Delete API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_home["Home page<br/>[+page.svelte]"]
  node_alerts["Alert pages"]
end

subgraph group_management["Link management"]
  node_actions["Form actions<br/>[+page.server.ts]"]
  node_add["Add API<br/>[+server.ts]"]
  node_delete["Delete API<br/>[+server.ts]"]
  node_list["List API<br/>[+server.ts]"]
end

subgraph group_resolution["Slug resolution"]
  node_slugpage["Slug page<br/>[+page.svelte]"]
  node_get["Lookup API<br/>[+server.ts]"]
end

subgraph group_storage["Persistent storage"]
  node_redis[("Redis KV")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"submits forms"| node_actions
node_home -->|"fetches links"| node_list
node_actions -->|"posts link"| node_add
node_actions -->|"posts deletion"| node_delete
node_actions -->|"redirects errors"| node_alerts
node_slugpage -->|"requests destination"| node_get
node_add -->|"writes link"| node_redis
node_delete -->|"deletes link"| node_redis
node_list -->|"reads all links"| node_redis
node_get -->|"reads destination"| node_redis

click node_home "https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/%2Bpage.svelte"
click node_alerts "https://github.com/kraafter/simpleshortener-svelte/tree/main/src/routes/alert"
click node_actions "https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/%2Bpage.server.ts"
click node_add "https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/add/%2Bserver.ts"
click node_delete "https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/delete/%2Bserver.ts"
click node_list "https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/list/%2Bserver.ts"
click node_slugpage "https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/%5Bslug%5D/%2Bpage.svelte"
click node_get "https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/get/%2Bserver.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_home,node_alerts toneBlue
class node_actions,node_add,node_delete,node_list toneAmber
class node_slugpage,node_get toneMint
class node_redis toneRose
class node_visitor toneIndigo
```

## Components

### Web experience

- [Home page](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`
- [Alert pages](https://github.com/kraafter/simpleshortener-svelte/tree/main/src/routes/alert): `src/routes/alert`

### Link management

- [Form actions](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/%2Bpage.server.ts): `src/routes/+page.server.ts`
- [Add API](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/add/%2Bserver.ts): `src/routes/api/add/+server.ts`
- [Delete API](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/delete/%2Bserver.ts): `src/routes/api/delete/+server.ts`
- [List API](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/list/%2Bserver.ts): `src/routes/api/list/+server.ts`

### Slug resolution

- [Slug page](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/%5Bslug%5D/%2Bpage.svelte): `src/routes/[slug]/+page.svelte`
- [Lookup API](https://github.com/kraafter/simpleshortener-svelte/blob/main/src/routes/api/get/%2Bserver.ts): `src/routes/api/get/+server.ts`

### Persistent storage

- **Redis KV**

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens (evidence: `src/routes/+page.svelte`)
- Home page → Form actions: submits forms (evidence: `src/routes/+page.svelte`)
- Home page → List API: fetches links (evidence: `src/routes/+page.svelte`)
- Form actions → Add API: posts link (evidence: `src/routes/+page.server.ts`)
- Form actions → Delete API: posts deletion (evidence: `src/routes/+page.server.ts`)
- Form actions → Alert pages: redirects errors (evidence: `src/routes/+page.server.ts`)
- Slug page → Lookup API: requests destination (evidence: `src/routes/[slug]/+page.svelte`)
- Add API → Redis KV: writes link (evidence: `src/routes/api/add/+server.ts`)
- Delete API → Redis KV: deletes link (evidence: `src/routes/api/delete/+server.ts`)
- List API → Redis KV: reads all links (evidence: `src/routes/api/list/+server.ts`)
- Lookup API → Redis KV: reads destination (evidence: `src/routes/api/get/+server.ts`)