# naham6/image-resizer architecture

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

- Interactive diagram: https://gitdiagram.com/naham6/image-resizer
- Repository: https://github.com/naham6/image-resizer

## Overview

This workspace contains several separate products rather than one end-to-end application: a private, browser-local image resizer; a component preview sandbox; an Express API server; and shared API/database libraries. The primary user workflow is selecting an image, choosing resize parameters, rendering locally, and downloading the result. The image-resizer excerpts support the rendering and privacy behavior; sandbox component discovery is partly inferred from the plugin and renderer, while API route details are unsampled.

Main entry points: [`artifacts/image-resizer/src/App.tsx`](https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx) (Resize Interface), [`artifacts/mockup-sandbox/src/App.tsx`](https://github.com/naham6/image-resizer/blob/main/artifacts/mockup-sandbox/src/App.tsx) (Preview Router), [`artifacts/api-server/src/app.ts`](https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/app.ts) (Express Middleware), [`lib/api-client-react/src/custom-fetch.ts`](https://github.com/naham6/image-resizer/blob/main/lib/api-client-react/src/custom-fetch.ts) (Fetch Client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_resize["Image Resizer"]
  node_image_entry["Browser Entry<br/>[main.tsx]"]
  node_image_app["Resize Interface<br/>[App.tsx]"]
  node_source_image["Selected Image"]
  node_resize_options["Resize Settings<br/>[App.tsx]"]
  node_image_render["Image Rendering<br/>[image-utils.ts]"]
  node_image_result["Rendered Image<br/>[App.tsx]"]
  node_download["Download Result<br/>[App.tsx]"]
end

subgraph group_preview["Component Preview"]
  node_preview_app["Preview Router<br/>[App.tsx]"]
  node_component_modules["Component Modules"]
  node_component_view["Rendered Preview<br/>[App.tsx]"]
end

subgraph group_server["API Server"]
  node_api_app["Express Middleware<br/>[app.ts]"]
  node_api_routes["API Routes<br/>[index.ts]"]
  node_health_route["Health Route<br/>[health.ts]"]
  node_logger["Request Logger<br/>[logger.ts]"]
end

subgraph group_shared["Shared Libraries"]
  node_api_client["Fetch Client<br/>[custom-fetch.ts]"]
  node_api_spec["API Specification"]
  node_api_zod["Zod API Types<br/>[index.ts]"]
  node_db_client["Database Client<br/>[index.ts]"]
  node_db_schema["Database Schema<br/>[index.ts]"]
end

node_image_user(("Image User"))
node_preview_user(("Canvas User"))
node_api_user(("API Caller"))
node_postgres[("PostgreSQL")]

node_image_user -->|"opens"| node_image_entry
node_image_entry -->|"renders"| node_image_app
node_image_user -->|"selects"| node_source_image
node_source_image -->|"supplies"| node_image_app
node_image_user -->|"chooses"| node_resize_options
node_resize_options -->|"configures"| node_image_app
node_image_app -->|"renders locally"| node_image_render
node_image_render -->|"returns"| node_image_result
node_image_app -->|"offers download"| node_download
node_image_result -->|"provides file"| node_download
node_preview_user -->|"opens"| node_preview_app
node_preview_app -->|"loads module"| node_component_modules
node_preview_app -->|"renders component"| node_component_view
node_api_user -->|"sends request"| node_api_app
node_api_app -->|"logs request"| node_logger
node_api_app -->|"dispatches"| node_api_routes
node_api_routes -->|"routes health"| node_health_route
node_api_client -.->|"issues configured requests"| node_api_user
node_db_client -->|"uses schema"| node_db_schema
node_db_client -->|"connects"| node_postgres
node_api_spec -.->|"configures generation"| node_api_client
node_api_zod -.->|"shares types"| node_api_client

click node_image_entry "https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/main.tsx"
click node_image_app "https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx"
click node_resize_options "https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx"
click node_image_render "https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/lib/image-utils.ts"
click node_image_result "https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx"
click node_download "https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx"
click node_preview_app "https://github.com/naham6/image-resizer/blob/main/artifacts/mockup-sandbox/src/App.tsx"
click node_component_modules "https://github.com/naham6/image-resizer/tree/main/artifacts/mockup-sandbox/src"
click node_component_view "https://github.com/naham6/image-resizer/blob/main/artifacts/mockup-sandbox/src/App.tsx"
click node_api_app "https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/app.ts"
click node_api_routes "https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/routes/index.ts"
click node_health_route "https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/routes/health.ts"
click node_logger "https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/lib/logger.ts"
click node_api_client "https://github.com/naham6/image-resizer/blob/main/lib/api-client-react/src/custom-fetch.ts"
click node_api_spec "https://github.com/naham6/image-resizer/tree/main/lib/api-spec"
click node_api_zod "https://github.com/naham6/image-resizer/blob/main/lib/api-zod/src/index.ts"
click node_db_client "https://github.com/naham6/image-resizer/blob/main/lib/db/src/index.ts"
click node_db_schema "https://github.com/naham6/image-resizer/blob/main/lib/db/src/schema/index.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_image_entry,node_image_app,node_source_image,node_resize_options,node_image_render,node_image_result,node_download,node_image_user,node_preview_user toneBlue
class node_preview_app,node_component_modules,node_component_view,node_postgres toneAmber
class node_api_app,node_api_routes,node_health_route,node_logger,node_api_user toneMint
class node_api_client,node_api_spec,node_api_zod,node_db_client,node_db_schema toneRose
```

## Components

### Image Resizer

- [Browser Entry](https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/main.tsx): `artifacts/image-resizer/src/main.tsx`
- [Resize Interface](https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx): `artifacts/image-resizer/src/App.tsx`
- **Selected Image**
- [Resize Settings](https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx): `artifacts/image-resizer/src/App.tsx`
- [Image Rendering](https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/lib/image-utils.ts): `artifacts/image-resizer/src/lib/image-utils.ts`
- [Rendered Image](https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx): `artifacts/image-resizer/src/App.tsx`
- [Download Result](https://github.com/naham6/image-resizer/blob/main/artifacts/image-resizer/src/App.tsx): `artifacts/image-resizer/src/App.tsx`

### Component Preview

- [Preview Router](https://github.com/naham6/image-resizer/blob/main/artifacts/mockup-sandbox/src/App.tsx): `artifacts/mockup-sandbox/src/App.tsx`
- [Component Modules](https://github.com/naham6/image-resizer/tree/main/artifacts/mockup-sandbox/src): `artifacts/mockup-sandbox/src`
- [Rendered Preview](https://github.com/naham6/image-resizer/blob/main/artifacts/mockup-sandbox/src/App.tsx): `artifacts/mockup-sandbox/src/App.tsx`

### API Server

- [Express Middleware](https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/app.ts): `artifacts/api-server/src/app.ts`
- [API Routes](https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/routes/index.ts): `artifacts/api-server/src/routes/index.ts`
- [Health Route](https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/routes/health.ts): `artifacts/api-server/src/routes/health.ts`
- [Request Logger](https://github.com/naham6/image-resizer/blob/main/artifacts/api-server/src/lib/logger.ts): `artifacts/api-server/src/lib/logger.ts`

### Shared Libraries

- [Fetch Client](https://github.com/naham6/image-resizer/blob/main/lib/api-client-react/src/custom-fetch.ts): `lib/api-client-react/src/custom-fetch.ts`
- [API Specification](https://github.com/naham6/image-resizer/tree/main/lib/api-spec): `lib/api-spec`
- [Zod API Types](https://github.com/naham6/image-resizer/blob/main/lib/api-zod/src/index.ts): `lib/api-zod/src/index.ts`
- [Database Client](https://github.com/naham6/image-resizer/blob/main/lib/db/src/index.ts): `lib/db/src/index.ts`
- [Database Schema](https://github.com/naham6/image-resizer/blob/main/lib/db/src/schema/index.ts): `lib/db/src/schema/index.ts`

### Other components

- **Image User**
- **Canvas User**
- **API Caller**
- **PostgreSQL**

## Connections

- Image User → Browser Entry: opens
- Browser Entry → Resize Interface: renders
- Image User → Selected Image: selects
- Selected Image → Resize Interface: supplies
- Image User → Resize Settings: chooses
- Resize Settings → Resize Interface: configures
- Resize Interface → Image Rendering: renders locally
- Image Rendering → Rendered Image: returns
- Resize Interface → Download Result: offers download
- Rendered Image → Download Result: provides file
- Canvas User → Preview Router: opens
- Preview Router → Component Modules: loads module
- Preview Router → Rendered Preview: renders component
- API Caller → Express Middleware: sends request
- Express Middleware → Request Logger: logs request
- Express Middleware → API Routes: dispatches
- API Routes → Health Route: routes health
- Fetch Client → API Caller: issues configured requests
- Database Client → Database Schema: uses schema
- Database Client → PostgreSQL: connects
- API Specification → Fetch Client: configures generation
- Zod API Types → Fetch Client: shares types