# teteudeveloper/snap2pdf architecture

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

## Overview

Snap2PDF is a browser-based image-to-PDF app. Users add JPG, PNG, or WebP files, reorder or remove them, then generate and download one PDF locally. The main flow is visible in the sampled uploader, conversion button, validation, and PDF generator code; the README also confirms multi-image documents and local processing. WebP conversion and downloads use browser APIs. No server-side upload or persistent store is shown.

Main entry points: [`app/components/ImageUploader.tsx`](https://github.com/teteudeveloper/snap2pdf/blob/main/app/components/ImageUploader.tsx) (Image uploader), [`app/lib/pdfGenerator.ts`](https://github.com/teteudeveloper/snap2pdf/blob/main/app/lib/pdfGenerator.ts) (PDF builder), [`app/components/ConvertButton.tsx`](https://github.com/teteudeveloper/snap2pdf/blob/main/app/components/ConvertButton.tsx) (Convert button), [`app/page.tsx`](https://github.com/teteudeveloper/snap2pdf/blob/main/app/page.tsx) (Home page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_home["Home page<br/>[page.tsx]"]
  node_uploader["Image uploader<br/>[ImageUploader.tsx]"]
  node_preview["Image preview<br/>[ImagePreview.tsx]"]
  node_convert["Convert button<br/>[ConvertButton.tsx]"]
end

subgraph group_workflow["Image workflow"]
  node_validation["File validation<br/>[validation.ts]"]
end

subgraph group_output["PDF output"]
  node_builder["PDF builder<br/>[pdfGenerator.ts]"]
  node_downloader["PDF downloader<br/>[pdfGenerator.ts]"]
  node_pdflib["pdf-lib"]
  node_browser["Browser APIs"]
end

node_user(("User"))

node_user -->|"opens"| node_home
node_home -->|"renders"| node_uploader
node_user -->|"adds images"| node_uploader
node_uploader -->|"validates files"| node_validation
node_uploader -->|"shows images"| node_preview
node_user -->|"reorders or removes"| node_preview
node_uploader -->|"passes image list"| node_convert
node_user -->|"starts conversion"| node_convert
node_convert -->|"generates PDF"| node_builder
node_builder -->|"creates document"| node_pdflib
node_builder -->|"converts WebP"| node_browser
node_builder -->|"returns PDF blob"| node_downloader
node_convert -->|"downloads PDF"| node_downloader
node_downloader -->|"triggers download"| node_browser
node_browser -->|"provides PDF"| node_user

click node_home "https://github.com/teteudeveloper/snap2pdf/blob/main/app/page.tsx"
click node_uploader "https://github.com/teteudeveloper/snap2pdf/blob/main/app/components/ImageUploader.tsx"
click node_preview "https://github.com/teteudeveloper/snap2pdf/blob/main/app/components/ImagePreview.tsx"
click node_validation "https://github.com/teteudeveloper/snap2pdf/blob/main/app/lib/validation.ts"
click node_convert "https://github.com/teteudeveloper/snap2pdf/blob/main/app/components/ConvertButton.tsx"
click node_builder "https://github.com/teteudeveloper/snap2pdf/blob/main/app/lib/pdfGenerator.ts"
click node_downloader "https://github.com/teteudeveloper/snap2pdf/blob/main/app/lib/pdfGenerator.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_uploader,node_preview,node_convert,node_user toneBlue
class node_validation toneAmber
class node_builder,node_downloader,node_pdflib,node_browser toneMint
```

## Components

### User interface

- [Home page](https://github.com/teteudeveloper/snap2pdf/blob/main/app/page.tsx): `app/page.tsx`
- [Image uploader](https://github.com/teteudeveloper/snap2pdf/blob/main/app/components/ImageUploader.tsx): `app/components/ImageUploader.tsx`
- [Image preview](https://github.com/teteudeveloper/snap2pdf/blob/main/app/components/ImagePreview.tsx): `app/components/ImagePreview.tsx`
- [Convert button](https://github.com/teteudeveloper/snap2pdf/blob/main/app/components/ConvertButton.tsx): `app/components/ConvertButton.tsx`

### Image workflow

- [File validation](https://github.com/teteudeveloper/snap2pdf/blob/main/app/lib/validation.ts): `app/lib/validation.ts`

### PDF output

- [PDF builder](https://github.com/teteudeveloper/snap2pdf/blob/main/app/lib/pdfGenerator.ts): `app/lib/pdfGenerator.ts`
- [PDF downloader](https://github.com/teteudeveloper/snap2pdf/blob/main/app/lib/pdfGenerator.ts): `app/lib/pdfGenerator.ts`
- **pdf-lib**
- **Browser APIs**

### Other components

- **User**

## Connections

- User → Home page: opens
- Home page → Image uploader: renders
- User → Image uploader: adds images
- Image uploader → File validation: validates files
- Image uploader → Image preview: shows images
- User → Image preview: reorders or removes
- Image uploader → Convert button: passes image list
- User → Convert button: starts conversion
- Convert button → PDF builder: generates PDF
- PDF builder → pdf-lib: creates document
- PDF builder → Browser APIs: converts WebP
- PDF builder → PDF downloader: returns PDF blob
- Convert button → PDF downloader: downloads PDF
- PDF downloader → Browser APIs: triggers download
- Browser APIs → User: provides PDF