# toplevmas/paywallbuster architecture

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

- Interactive diagram: https://gitdiagram.com/toplevmas/paywallbuster
- Repository: https://github.com/toplevmas/paywallbuster

## Overview

PaywallBuster is a client-side aggregator: users enter an article URL, open the article page, choose a third-party service, and view or share the resulting link. The README also documents bilingual UI, FAQ content, and five service integrations; these are reflected here. The supplied Articles source was not sampled, so service selection, preview, and sharing links are based on README documentation rather than verified call sites. No backend or persistent article store is shown.

Main entry points: [`client/src/pages/Articles.tsx`](https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx) (Service selection), [`client/src/pages/Home.tsx`](https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Home.tsx) (Home page), [`client/src/App.tsx`](https://github.com/toplevmas/paywallbuster/blob/main/client/src/App.tsx) (App router), [`client/src/contexts/LanguageContext.tsx`](https://github.com/toplevmas/paywallbuster/blob/main/client/src/contexts/LanguageContext.tsx) (Language state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App routing"]
  node_app["App router<br/>[App.tsx]"]
end

subgraph group_workflow["Article workflow"]
  node_articles["Articles page<br/>[Articles.tsx]"]
  node_servicepicker["Service selection<br/>[Articles.tsx]"]
  node_preview["Result preview<br/>[Articles.tsx]"]
  node_sharing["Share and copy<br/>[Articles.tsx]"]
end

subgraph group_content["Home content"]
  node_home["Home page<br/>[Home.tsx]"]
  node_faq["FAQ<br/>[Home.tsx]"]
end

subgraph group_presentation["Shared presentation"]
  node_language["Language state"]
  node_theme["Theme state<br/>[ThemeContext.tsx]"]
end

node_visitor(("Visitor"))
node_archiveis{{"Archive.is"}}
node_internetarchive{{"Internet Archive"}}
node_smry{{"Smry.ai"}}
node_twelveft{{"12ft.io"}}
node_googlecache{{"Google Cache"}}
node_social{{"Social platforms"}}

node_visitor -->|"opens"| node_home
node_app -->|"routes /"| node_home
node_app -->|"routes /articles"| node_articles
node_home -->|"reads and changes"| node_language
node_home -->|"renders"| node_faq
node_home -->|"submits article URL"| node_articles
node_articles -->|"presents choices"| node_servicepicker
node_servicepicker -->|"opens service"| node_archiveis
node_servicepicker -->|"opens service"| node_internetarchive
node_servicepicker -->|"opens service"| node_smry
node_servicepicker -->|"opens service"| node_twelveft
node_servicepicker -->|"opens service"| node_googlecache
node_articles -->|"shows result"| node_preview
node_articles -->|"provides link actions"| node_sharing
node_sharing -->|"shares link"| node_social
node_app -->|"provides theme"| node_theme

click node_app "https://github.com/toplevmas/paywallbuster/blob/main/client/src/App.tsx"
click node_home "https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Home.tsx"
click node_faq "https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Home.tsx"
click node_language "https://github.com/toplevmas/paywallbuster/blob/main/client/src/contexts/LanguageContext.tsx"
click node_theme "https://github.com/toplevmas/paywallbuster/blob/main/client/src/contexts/ThemeContext.tsx"
click node_articles "https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx"
click node_servicepicker "https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx"
click node_preview "https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx"
click node_sharing "https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx"

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_app toneBlue
class node_articles,node_servicepicker,node_preview,node_sharing,node_googlecache toneAmber
class node_home,node_faq toneMint
class node_language,node_theme toneRose
class node_visitor,node_archiveis,node_internetarchive,node_smry,node_twelveft,node_social toneIndigo
```

## Components

### App routing

- [App router](https://github.com/toplevmas/paywallbuster/blob/main/client/src/App.tsx): `client/src/App.tsx`

### Article workflow

- [Articles page](https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx): `client/src/pages/Articles.tsx`
- [Service selection](https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx): `client/src/pages/Articles.tsx`
- [Result preview](https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx): `client/src/pages/Articles.tsx`
- [Share and copy](https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Articles.tsx): `client/src/pages/Articles.tsx`

### Home content

- [Home page](https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Home.tsx): `client/src/pages/Home.tsx`
- [FAQ](https://github.com/toplevmas/paywallbuster/blob/main/client/src/pages/Home.tsx): `client/src/pages/Home.tsx`

### Shared presentation

- [Language state](https://github.com/toplevmas/paywallbuster/blob/main/client/src/contexts/LanguageContext.tsx): `client/src/contexts/LanguageContext.tsx`
- [Theme state](https://github.com/toplevmas/paywallbuster/blob/main/client/src/contexts/ThemeContext.tsx): `client/src/contexts/ThemeContext.tsx`

### Other components

- **Visitor**
- **Archive.is**
- **Internet Archive**
- **Smry.ai**
- **12ft.io**
- **Google Cache**
- **Social platforms**

## Connections

- Visitor → Home page: opens
- App router → Home page: routes /
- App router → Articles page: routes /articles
- Home page → Language state: reads and changes
- Home page → FAQ: renders
- Home page → Articles page: submits article URL
- Articles page → Service selection: presents choices
- Service selection → Archive.is: opens service
- Service selection → Internet Archive: opens service
- Service selection → Smry.ai: opens service
- Service selection → 12ft.io: opens service
- Service selection → Google Cache: opens service
- Articles page → Result preview: shows result
- Articles page → Share and copy: provides link actions
- Share and copy → Social platforms: shares link
- App router → Theme state: provides theme