# techiesrishti/webslim architecture

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

## Overview

WebSlim analyzes a submitted website’s JavaScript and CSS usage, reports unused code and estimated savings, and offers library recommendations, code migration, and optimized-code downloads. The README also describes basic performance insights. The sampled backend shows Puppeteer Coverage analysis and carbon-impact calculation; the frontend excerpts show analysis, migration, visualizations, and report/download interactions. Some frontend-to-backend wiring and performance-metric details are unsampled, so those links are omitted.

Main entry points: [`backend/src/server.js`](https://github.com/techiesrishti/webslim/blob/main/backend/src/server.js) (API server), [`frontend/src/App.js`](https://github.com/techiesrishti/webslim/blob/main/frontend/src/App.js) (WebSlim app), [`frontend/src/CodePreview.js`](https://github.com/techiesrishti/webslim/blob/main/frontend/src/CodePreview.js) (Code preview), [`backend/src/analyzer.js`](https://github.com/techiesrishti/webslim/blob/main/backend/src/analyzer.js) (Coverage analyzer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web interface"]
  node_app["WebSlim app<br/>[App.js]"]
  node_codepreview["Code preview<br/>[CodePreview.js]"]
  node_charts["Analysis charts<br/>[WebSlimCharts.js]"]
  node_carbonui["Carbon display<br/>[CarbonSavings.js]"]
end

subgraph group_analysis["Website analysis"]
  node_server["API server<br/>[server.js]"]
  node_analyzer["Coverage analyzer<br/>[analyzer.js]"]
  node_puppeteer["Puppeteer browser<br/>[analyzer.js]"]
  node_librarydetector["Library recommendations<br/>[libraryDetector.js]"]
end

subgraph group_optimization["Optimization tools"]
  node_migrator["Library migration<br/>[libraryMigrator.js]"]
  node_minify["Code minification<br/>[server.js]"]
  node_optimizerui["Code optimizer UI<br/>[CodeOptimizer.js]"]
end

subgraph group_impact["Savings and reporting"]
  node_carbon["Carbon estimates<br/>[carbon.js]"]
  node_zip["Optimized ZIP report<br/>[server.js]"]
  node_report["Analysis report<br/>[CodePreview.js]"]
end

node_developer(("Developer"))
node_website(("Target website"))

node_developer -->|"submits URL"| node_app
node_app -->|"requests analysis"| node_server
node_server -->|"calls analyzer"| node_analyzer
node_analyzer -->|"controls browser"| node_puppeteer
node_puppeteer -->|"loads page"| node_website
node_analyzer -->|"returns coverage"| node_server
node_server -->|"gets alternatives"| node_librarydetector
node_server -->|"calculates impact"| node_carbon
node_server -->|"returns results"| node_app
node_app -->|"renders metrics"| node_charts
node_app -->|"renders savings"| node_carbonui
node_app -->|"shows analysis"| node_codepreview
node_codepreview -->|"requests ZIP"| node_server
node_server -->|"builds ZIP"| node_zip
node_zip -->|"returns download"| node_codepreview
node_app -->|"submits migration"| node_server
node_server -->|"rewrites code"| node_migrator
node_migrator -->|"returns transformed code"| node_server
node_server -->|"minifies code"| node_minify
node_codepreview -->|"exports report"| node_report
node_optimizerui -.->|"requests optimization"| node_server

click node_app "https://github.com/techiesrishti/webslim/blob/main/frontend/src/App.js"
click node_codepreview "https://github.com/techiesrishti/webslim/blob/main/frontend/src/CodePreview.js"
click node_charts "https://github.com/techiesrishti/webslim/blob/main/frontend/src/WebSlimCharts.js"
click node_carbonui "https://github.com/techiesrishti/webslim/blob/main/frontend/src/CarbonSavings.js"
click node_server "https://github.com/techiesrishti/webslim/blob/main/backend/src/server.js"
click node_analyzer "https://github.com/techiesrishti/webslim/blob/main/backend/src/analyzer.js"
click node_puppeteer "https://github.com/techiesrishti/webslim/blob/main/backend/src/analyzer.js"
click node_librarydetector "https://github.com/techiesrishti/webslim/blob/main/backend/optimize/libraryDetector.js"
click node_carbon "https://github.com/techiesrishti/webslim/blob/main/backend/src/carbon.js"
click node_migrator "https://github.com/techiesrishti/webslim/blob/main/backend/optimize/libraryMigrator.js"
click node_minify "https://github.com/techiesrishti/webslim/blob/main/backend/src/server.js"
click node_zip "https://github.com/techiesrishti/webslim/blob/main/backend/src/server.js"
click node_report "https://github.com/techiesrishti/webslim/blob/main/frontend/src/CodePreview.js"
click node_optimizerui "https://github.com/techiesrishti/webslim/blob/main/frontend/src/CodeOptimizer.js"

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,node_codepreview,node_charts,node_carbonui toneBlue
class node_server,node_analyzer,node_puppeteer,node_librarydetector toneAmber
class node_migrator,node_minify,node_optimizerui toneMint
class node_carbon,node_zip,node_report toneRose
class node_developer,node_website toneIndigo
```

## Components

### Web interface

- [WebSlim app](https://github.com/techiesrishti/webslim/blob/main/frontend/src/App.js): `frontend/src/App.js`
- [Code preview](https://github.com/techiesrishti/webslim/blob/main/frontend/src/CodePreview.js): `frontend/src/CodePreview.js`
- [Analysis charts](https://github.com/techiesrishti/webslim/blob/main/frontend/src/WebSlimCharts.js): `frontend/src/WebSlimCharts.js`
- [Carbon display](https://github.com/techiesrishti/webslim/blob/main/frontend/src/CarbonSavings.js): `frontend/src/CarbonSavings.js`

### Website analysis

- [API server](https://github.com/techiesrishti/webslim/blob/main/backend/src/server.js): `backend/src/server.js`
- [Coverage analyzer](https://github.com/techiesrishti/webslim/blob/main/backend/src/analyzer.js): `backend/src/analyzer.js`
- [Puppeteer browser](https://github.com/techiesrishti/webslim/blob/main/backend/src/analyzer.js): `backend/src/analyzer.js`
- [Library recommendations](https://github.com/techiesrishti/webslim/blob/main/backend/optimize/libraryDetector.js): `backend/optimize/libraryDetector.js`

### Optimization tools

- [Library migration](https://github.com/techiesrishti/webslim/blob/main/backend/optimize/libraryMigrator.js): `backend/optimize/libraryMigrator.js`
- [Code minification](https://github.com/techiesrishti/webslim/blob/main/backend/src/server.js): `backend/src/server.js`
- [Code optimizer UI](https://github.com/techiesrishti/webslim/blob/main/frontend/src/CodeOptimizer.js): `frontend/src/CodeOptimizer.js`

### Savings and reporting

- [Carbon estimates](https://github.com/techiesrishti/webslim/blob/main/backend/src/carbon.js): `backend/src/carbon.js`
- [Optimized ZIP report](https://github.com/techiesrishti/webslim/blob/main/backend/src/server.js): `backend/src/server.js`
- [Analysis report](https://github.com/techiesrishti/webslim/blob/main/frontend/src/CodePreview.js): `frontend/src/CodePreview.js`

### Other components

- **Developer**
- **Target website**

## Connections

- Developer → WebSlim app: submits URL
- WebSlim app → API server: requests analysis
- API server → Coverage analyzer: calls analyzer
- Coverage analyzer → Puppeteer browser: controls browser
- Puppeteer browser → Target website: loads page
- Coverage analyzer → API server: returns coverage
- API server → Library recommendations: gets alternatives
- API server → Carbon estimates: calculates impact
- API server → WebSlim app: returns results
- WebSlim app → Analysis charts: renders metrics
- WebSlim app → Carbon display: renders savings
- WebSlim app → Code preview: shows analysis
- Code preview → API server: requests ZIP
- API server → Optimized ZIP report: builds ZIP
- Optimized ZIP report → Code preview: returns download
- WebSlim app → API server: submits migration
- API server → Library migration: rewrites code
- Library migration → API server: returns transformed code
- API server → Code minification: minifies code
- Code preview → Analysis report: exports report
- Code optimizer UI → API server: requests optimization