# indigomac/snapshark architecture

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

- Interactive diagram: https://gitdiagram.com/indigomac/snapshark
- Repository: https://github.com/indigomac/snapshark

## Overview

SnapShark combines a browser-based image-processing suite with a dive logbook and subscription features. The main processing workflow is selecting images, configuring format and processing options, previewing results, then downloading them; specialized background-removal and underwater tools are separate branches. The logbook workflow records trips, dive sites, dives, and photos, with sharing and account export/deletion capabilities. README documents processing and worker capabilities; sampled source confirms selected logbook and billing flows, but does not establish every UI-to-service connection.

Main entry points: [`src/lib/db.ts`](https://github.com/indigomac/snapshark/blob/main/src/lib/db.ts) (Application database), [`src/app/logbook/LogbookClient.tsx`](https://github.com/indigomac/snapshark/blob/main/src/app/logbook/LogbookClient.tsx) (Logbook interface), [`src/lib/auth.ts`](https://github.com/indigomac/snapshark/blob/main/src/lib/auth.ts) (Authentication), [`src/app/api/photos/route.ts`](https://github.com/indigomac/snapshark/blob/main/src/app/api/photos/route.ts) (Photo endpoints)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_image["Image tools"]
  node_main["Image processor<br/>[page.tsx]"]
  node_processor["Processing hook"]
  node_worker["Image worker<br/>[imageWorker.ts]"]
  node_canvas["Canvas processing<br/>[canvas.ts]"]
  node_formats["Formats and presets<br/>[formats.ts]"]
  node_convert["Format converter<br/>[page.tsx]"]
  node_background["Background removal<br/>[page.tsx]"]
  node_bgprocessor["Segmentation logic"]
  node_underwater["Underwater correction<br/>[page.tsx]"]
  node_videoprocess["Underwater processing"]
end

subgraph group_logbook["Dive logbook"]
  node_logbookui["Logbook interface<br/>[LogbookClient.tsx]"]
  node_tripsapi["Trip endpoints<br/>[route.ts]"]
  node_sitesapi["Dive-site endpoints<br/>[route.ts]"]
  node_divesapi["Dive endpoints<br/>[route.ts]"]
  node_photosapi["Photo endpoints<br/>[route.ts]"]
  node_photohelper["Photo storage helper"]
  node_sharepage["Shared logbook view<br/>[page.tsx]"]
  node_exportapi["Logbook export/delete<br/>[route.ts]"]
end

subgraph group_billing["Account and billing"]
  node_account["Account dashboard<br/>[page.tsx]"]
  node_checkout["Checkout endpoint<br/>[route.ts]"]
  node_cancel["Subscription cancellation<br/>[route.ts]"]
  node_stripehook["Stripe webhook<br/>[route.ts]"]
  node_entitlements["Entitlements<br/>[entitlements.ts]"]
end

subgraph group_services["Shared services"]
  node_auth["Authentication<br/>[auth.ts]"]
  node_database[("Application database<br/>[db.ts]")]
  node_subscription["Subscription service<br/>[subscription.ts]"]
end

node_visitor(("Visitor"))
node_clerk{{"Clerk"}}
node_stripe{{"Stripe"}}
node_nominatim{{"Nominatim"}}

node_visitor -->|"selects images"| node_main
node_visitor -->|"converts images"| node_convert
node_visitor -->|"removes background"| node_background
node_visitor -->|"corrects photos"| node_underwater
node_main -->|"configures processing"| node_processor
node_processor -->|"dispatches work"| node_worker
node_worker -->|"processes pixels"| node_canvas
node_processor -->|"uses options"| node_formats
node_background -->|"runs removal"| node_bgprocessor
node_underwater -->|"runs correction"| node_videoprocess
node_visitor -->|"records dives"| node_logbookui
node_logbookui -->|"requests trips"| node_tripsapi
node_logbookui -->|"requests sites"| node_sitesapi
node_logbookui -->|"requests dives"| node_divesapi
node_logbookui -->|"requests photos"| node_photosapi
node_tripsapi -->|"authenticates user"| node_auth
node_sitesapi -->|"authenticates user"| node_auth
node_divesapi -->|"authenticates user"| node_auth
node_photosapi -->|"authenticates user"| node_auth
node_tripsapi -->|"reads and writes"| node_database
node_sitesapi -->|"reads and writes"| node_database
node_divesapi -->|"reads and writes"| node_database
node_photosapi -->|"reads and writes"| node_database
node_photosapi -->|"stores photo"| node_photohelper
node_visitor -->|"opens shared logbook"| node_sharepage
node_visitor -->|"exports or erases"| node_exportapi
node_exportapi -->|"authenticates user"| node_auth
node_exportapi -->|"reads and deletes"| node_database
node_exportapi -->|"deletes stored photos"| node_photohelper
node_visitor -->|"manages account"| node_account
node_account -->|"starts subscription"| node_checkout
node_account -->|"cancels subscription"| node_cancel
node_checkout -->|"creates checkout"| node_stripe
node_cancel -->|"updates subscription"| node_stripe
node_stripe -->|"sends events"| node_stripehook
node_stripehook -->|"syncs subscription"| node_subscription
node_cancel -->|"syncs subscription"| node_subscription
node_subscription -->|"stores subscription"| node_database
node_stripehook -->|"updates metadata"| node_clerk
node_cancel -->|"updates metadata"| node_clerk
node_account -->|"checks access"| node_entitlements
node_visitor -.->|"searches location"| node_nominatim

click node_main "https://github.com/indigomac/snapshark/blob/main/src/app/page.tsx"
click node_processor "https://github.com/indigomac/snapshark/blob/main/src/hooks/useImageProcessor.ts"
click node_worker "https://github.com/indigomac/snapshark/blob/main/src/workers/imageWorker.ts"
click node_canvas "https://github.com/indigomac/snapshark/blob/main/src/lib/canvas.ts"
click node_formats "https://github.com/indigomac/snapshark/blob/main/src/lib/formats.ts"
click node_convert "https://github.com/indigomac/snapshark/blob/main/src/app/convert/page.tsx"
click node_background "https://github.com/indigomac/snapshark/blob/main/src/app/background-removal/page.tsx"
click node_bgprocessor "https://github.com/indigomac/snapshark/blob/main/src/lib/background-removal.ts"
click node_underwater "https://github.com/indigomac/snapshark/blob/main/src/app/underwater/page.tsx"
click node_videoprocess "https://github.com/indigomac/snapshark/blob/main/src/lib/underwater-video.ts"
click node_logbookui "https://github.com/indigomac/snapshark/blob/main/src/app/logbook/LogbookClient.tsx"
click node_tripsapi "https://github.com/indigomac/snapshark/blob/main/src/app/api/trips/route.ts"
click node_sitesapi "https://github.com/indigomac/snapshark/blob/main/src/app/api/dive-sites/route.ts"
click node_divesapi "https://github.com/indigomac/snapshark/blob/main/src/app/api/dives/route.ts"
click node_photosapi "https://github.com/indigomac/snapshark/blob/main/src/app/api/photos/route.ts"
click node_photohelper "https://github.com/indigomac/snapshark/blob/main/src/lib/store-logbook-photo.ts"
click node_sharepage "https://github.com/indigomac/snapshark/blob/main/src/app/s/%5Btoken%5D/page.tsx"
click node_exportapi "https://github.com/indigomac/snapshark/blob/main/src/app/api/account/logbook/route.ts"
click node_account "https://github.com/indigomac/snapshark/blob/main/src/app/account/page.tsx"
click node_checkout "https://github.com/indigomac/snapshark/blob/main/src/app/api/stripe/checkout/route.ts"
click node_cancel "https://github.com/indigomac/snapshark/blob/main/src/app/api/stripe/cancel/route.ts"
click node_stripehook "https://github.com/indigomac/snapshark/blob/main/src/app/api/stripe/webhook/route.ts"
click node_entitlements "https://github.com/indigomac/snapshark/blob/main/src/lib/entitlements.ts"
click node_auth "https://github.com/indigomac/snapshark/blob/main/src/lib/auth.ts"
click node_database "https://github.com/indigomac/snapshark/blob/main/src/lib/db.ts"
click node_subscription "https://github.com/indigomac/snapshark/blob/main/src/lib/subscription.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_main,node_processor,node_worker,node_canvas,node_formats,node_convert,node_background,node_bgprocessor,node_underwater,node_videoprocess toneBlue
class node_logbookui,node_tripsapi,node_sitesapi,node_divesapi,node_photosapi,node_photohelper,node_sharepage,node_exportapi toneAmber
class node_account,node_checkout,node_cancel,node_stripehook,node_entitlements toneMint
class node_auth,node_database,node_subscription toneRose
class node_visitor,node_clerk,node_stripe,node_nominatim toneIndigo
```

## Components

### Image tools

- [Image processor](https://github.com/indigomac/snapshark/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Processing hook](https://github.com/indigomac/snapshark/blob/main/src/hooks/useImageProcessor.ts): `src/hooks/useImageProcessor.ts`
- [Image worker](https://github.com/indigomac/snapshark/blob/main/src/workers/imageWorker.ts): `src/workers/imageWorker.ts`
- [Canvas processing](https://github.com/indigomac/snapshark/blob/main/src/lib/canvas.ts): `src/lib/canvas.ts`
- [Formats and presets](https://github.com/indigomac/snapshark/blob/main/src/lib/formats.ts): `src/lib/formats.ts`
- [Format converter](https://github.com/indigomac/snapshark/blob/main/src/app/convert/page.tsx): `src/app/convert/page.tsx`
- [Background removal](https://github.com/indigomac/snapshark/blob/main/src/app/background-removal/page.tsx): `src/app/background-removal/page.tsx`
- [Segmentation logic](https://github.com/indigomac/snapshark/blob/main/src/lib/background-removal.ts): `src/lib/background-removal.ts`
- [Underwater correction](https://github.com/indigomac/snapshark/blob/main/src/app/underwater/page.tsx): `src/app/underwater/page.tsx`
- [Underwater processing](https://github.com/indigomac/snapshark/blob/main/src/lib/underwater-video.ts): `src/lib/underwater-video.ts`

### Dive logbook

- [Logbook interface](https://github.com/indigomac/snapshark/blob/main/src/app/logbook/LogbookClient.tsx): `src/app/logbook/LogbookClient.tsx`
- [Trip endpoints](https://github.com/indigomac/snapshark/blob/main/src/app/api/trips/route.ts): `src/app/api/trips/route.ts`
- [Dive-site endpoints](https://github.com/indigomac/snapshark/blob/main/src/app/api/dive-sites/route.ts): `src/app/api/dive-sites/route.ts`
- [Dive endpoints](https://github.com/indigomac/snapshark/blob/main/src/app/api/dives/route.ts): `src/app/api/dives/route.ts`
- [Photo endpoints](https://github.com/indigomac/snapshark/blob/main/src/app/api/photos/route.ts): `src/app/api/photos/route.ts`
- [Photo storage helper](https://github.com/indigomac/snapshark/blob/main/src/lib/store-logbook-photo.ts): `src/lib/store-logbook-photo.ts`
- [Shared logbook view](https://github.com/indigomac/snapshark/blob/main/src/app/s/%5Btoken%5D/page.tsx): `src/app/s/[token]/page.tsx`
- [Logbook export/delete](https://github.com/indigomac/snapshark/blob/main/src/app/api/account/logbook/route.ts): `src/app/api/account/logbook/route.ts`

### Account and billing

- [Account dashboard](https://github.com/indigomac/snapshark/blob/main/src/app/account/page.tsx): `src/app/account/page.tsx`
- [Checkout endpoint](https://github.com/indigomac/snapshark/blob/main/src/app/api/stripe/checkout/route.ts): `src/app/api/stripe/checkout/route.ts`
- [Subscription cancellation](https://github.com/indigomac/snapshark/blob/main/src/app/api/stripe/cancel/route.ts): `src/app/api/stripe/cancel/route.ts`
- [Stripe webhook](https://github.com/indigomac/snapshark/blob/main/src/app/api/stripe/webhook/route.ts): `src/app/api/stripe/webhook/route.ts`
- [Entitlements](https://github.com/indigomac/snapshark/blob/main/src/lib/entitlements.ts): `src/lib/entitlements.ts`

### Shared services

- [Authentication](https://github.com/indigomac/snapshark/blob/main/src/lib/auth.ts): `src/lib/auth.ts`
- [Application database](https://github.com/indigomac/snapshark/blob/main/src/lib/db.ts): `src/lib/db.ts`
- [Subscription service](https://github.com/indigomac/snapshark/blob/main/src/lib/subscription.ts): `src/lib/subscription.ts`

### Other components

- **Visitor**
- **Clerk**
- **Stripe**
- **Nominatim**

## Connections

- Visitor → Image processor: selects images
- Visitor → Format converter: converts images
- Visitor → Background removal: removes background
- Visitor → Underwater correction: corrects photos
- Image processor → Processing hook: configures processing
- Processing hook → Image worker: dispatches work
- Image worker → Canvas processing: processes pixels
- Processing hook → Formats and presets: uses options
- Background removal → Segmentation logic: runs removal
- Underwater correction → Underwater processing: runs correction
- Visitor → Logbook interface: records dives
- Logbook interface → Trip endpoints: requests trips
- Logbook interface → Dive-site endpoints: requests sites
- Logbook interface → Dive endpoints: requests dives
- Logbook interface → Photo endpoints: requests photos
- Trip endpoints → Authentication: authenticates user
- Dive-site endpoints → Authentication: authenticates user
- Dive endpoints → Authentication: authenticates user
- Photo endpoints → Authentication: authenticates user
- Trip endpoints → Application database: reads and writes
- Dive-site endpoints → Application database: reads and writes
- Dive endpoints → Application database: reads and writes
- Photo endpoints → Application database: reads and writes
- Photo endpoints → Photo storage helper: stores photo
- Visitor → Shared logbook view: opens shared logbook
- Visitor → Logbook export/delete: exports or erases
- Logbook export/delete → Authentication: authenticates user
- Logbook export/delete → Application database: reads and deletes
- Logbook export/delete → Photo storage helper: deletes stored photos
- Visitor → Account dashboard: manages account
- Account dashboard → Checkout endpoint: starts subscription
- Account dashboard → Subscription cancellation: cancels subscription
- Checkout endpoint → Stripe: creates checkout
- Subscription cancellation → Stripe: updates subscription
- Stripe → Stripe webhook: sends events
- Stripe webhook → Subscription service: syncs subscription
- Subscription cancellation → Subscription service: syncs subscription
- Subscription service → Application database: stores subscription
- Stripe webhook → Clerk: updates metadata
- Subscription cancellation → Clerk: updates metadata
- Account dashboard → Entitlements: checks access
- Visitor → Nominatim: searches location