# shubham-vandara/developer-toolbox architecture

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

- Interactive diagram: https://gitdiagram.com/shubham-vandara/developer-toolbox
- Repository: https://github.com/shubham-vandara/developer-toolbox

## Overview

Developer Toolbox is a frontend-only React app for finding and using 46 browser-based developer utilities. The user browses or searches the tool catalog, opens a tool route, enters data, and views or copies the locally processed result. Tool categories are grouped below to keep the map readable while retaining the README’s major capability areas. The README documents the registry-driven navigation and local-only behavior; sampled source confirms routing, storage, and selected tool implementations, but not every tool’s internal calls.

Main entry points: [`src/App.jsx`](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/App.jsx) (App routes), [`src/data/tools.js`](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/data/tools.js) (Tool registry), [`src/pages/Home.jsx`](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/pages/Home.jsx) (Homepage), [`src/pages/Tools.jsx`](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/pages/Tools.jsx) (Tool listing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["App routes<br/>[App.jsx]"]
  node_registry["Tool registry<br/>[tools.js]"]
  node_home["Homepage<br/>[Home.jsx]"]
  node_tool_listing["Tool listing<br/>[Tools.jsx]"]
  node_search["Search palette<br/>[CommandPalette.jsx]"]
end

subgraph group_tools["Tool categories"]
  node_json_data["JSON and data"]
  node_encoding["Encoding and URLs"]
  node_generators["Generators"]
  node_security["Security tools"]
  node_text["Text tools"]
  node_formatting["Formatting tools"]
  node_conversion["Converters"]
  node_date_time["Date and time"]
  node_networking["Network references"]
  node_reference["Cheatsheets"]
end

subgraph group_shared["Shared interface"]
  node_app_layout["App layout<br/>[AppLayout.jsx]"]
  node_tool_layout["Tool layout<br/>[ToolLayout.jsx]"]
  node_clipboard["Clipboard support<br/>[clipboard.js]"]
end

subgraph group_preferences["Local preferences"]
  node_theme["Theme provider<br/>[useTheme.jsx]"]
  node_storage_hook["Storage hook<br/>[useLocalStorage.js]"]
  node_storage[("Local storage<br/>[storage.js]")]
end

node_user(("User"))

node_user -->|"opens app"| node_app
node_app -->|"renders shell"| node_app_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_tool_listing
node_app -->|"maps tool routes"| node_registry
node_registry -->|"drives catalog"| node_home
node_registry -->|"drives listing"| node_tool_listing
node_registry -->|"provides tool data"| node_search
node_user -->|"browses tools"| node_home
node_user -->|"browses categories"| node_tool_listing
node_user -->|"searches tools"| node_search
node_app_layout -->|"frames tool routes"| node_tool_layout
node_app -->|"dispatches routes"| node_json_data
node_app -->|"dispatches routes"| node_encoding
node_app -->|"dispatches routes"| node_generators
node_app -->|"dispatches routes"| node_security
node_app -->|"dispatches routes"| node_text
node_app -->|"dispatches routes"| node_formatting
node_app -->|"dispatches routes"| node_conversion
node_app -->|"dispatches routes"| node_date_time
node_app -->|"dispatches routes"| node_networking
node_app -->|"dispatches routes"| node_reference
node_user -->|"copies output"| node_clipboard
node_app -->|"provides theme"| node_theme
node_theme -->|"reads and writes"| node_storage
node_storage_hook -->|"reads and writes"| node_storage

click node_app "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/App.jsx"
click node_registry "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/data/tools.js"
click node_home "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/pages/Home.jsx"
click node_tool_listing "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/pages/Tools.jsx"
click node_search "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/components/common/CommandPalette.jsx"
click node_json_data "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/json"
click node_encoding "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/base64"
click node_generators "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/uuid"
click node_security "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/hash-generator"
click node_text "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/text-case"
click node_formatting "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/sql-formatter"
click node_conversion "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/unit-converter"
click node_date_time "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/timestamp"
click node_networking "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/http-status-codes"
click node_reference "https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/git-cheatsheet"
click node_app_layout "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/components/layout/AppLayout.jsx"
click node_tool_layout "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/components/layout/ToolLayout.jsx"
click node_clipboard "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/utils/clipboard.js"
click node_theme "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/hooks/useTheme.jsx"
click node_storage_hook "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/hooks/useLocalStorage.js"
click node_storage "https://github.com/shubham-vandara/developer-toolbox/blob/main/src/utils/storage.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_registry,node_home,node_tool_listing,node_search,node_user toneBlue
class node_json_data,node_encoding,node_generators,node_security,node_text,node_formatting,node_conversion,node_date_time,node_networking,node_reference toneAmber
class node_app_layout,node_tool_layout,node_clipboard toneMint
class node_theme,node_storage_hook,node_storage toneRose
```

## Components

### App navigation

- [App routes](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/App.jsx): `src/App.jsx`
- [Tool registry](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/data/tools.js): `src/data/tools.js`
- [Homepage](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Tool listing](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/pages/Tools.jsx): `src/pages/Tools.jsx`
- [Search palette](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/components/common/CommandPalette.jsx): `src/components/common/CommandPalette.jsx`

### Tool categories

- [JSON and data](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/json): `src/tools/json`
- [Encoding and URLs](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/base64): `src/tools/base64`
- [Generators](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/uuid): `src/tools/uuid`
- [Security tools](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/hash-generator): `src/tools/hash-generator`
- [Text tools](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/text-case): `src/tools/text-case`
- [Formatting tools](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/sql-formatter): `src/tools/sql-formatter`
- [Converters](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/unit-converter): `src/tools/unit-converter`
- [Date and time](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/timestamp): `src/tools/timestamp`
- [Network references](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/http-status-codes): `src/tools/http-status-codes`
- [Cheatsheets](https://github.com/shubham-vandara/developer-toolbox/tree/main/src/tools/git-cheatsheet): `src/tools/git-cheatsheet`

### Shared interface

- [App layout](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/components/layout/AppLayout.jsx): `src/components/layout/AppLayout.jsx`
- [Tool layout](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/components/layout/ToolLayout.jsx): `src/components/layout/ToolLayout.jsx`
- [Clipboard support](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/utils/clipboard.js): `src/utils/clipboard.js`

### Local preferences

- [Theme provider](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/hooks/useTheme.jsx): `src/hooks/useTheme.jsx`
- [Storage hook](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/hooks/useLocalStorage.js): `src/hooks/useLocalStorage.js`
- [Local storage](https://github.com/shubham-vandara/developer-toolbox/blob/main/src/utils/storage.js): `src/utils/storage.js`

### Other components

- **User**

## Connections

- User → App routes: opens app
- App routes → App layout: renders shell
- App routes → Homepage: routes to
- App routes → Tool listing: routes to
- App routes → Tool registry: maps tool routes
- Tool registry → Homepage: drives catalog
- Tool registry → Tool listing: drives listing
- Tool registry → Search palette: provides tool data
- User → Homepage: browses tools
- User → Tool listing: browses categories
- User → Search palette: searches tools
- App layout → Tool layout: frames tool routes
- App routes → JSON and data: dispatches routes
- App routes → Encoding and URLs: dispatches routes
- App routes → Generators: dispatches routes
- App routes → Security tools: dispatches routes
- App routes → Text tools: dispatches routes
- App routes → Formatting tools: dispatches routes
- App routes → Converters: dispatches routes
- App routes → Date and time: dispatches routes
- App routes → Network references: dispatches routes
- App routes → Cheatsheets: dispatches routes
- User → Clipboard support: copies output
- App routes → Theme provider: provides theme
- Theme provider → Local storage: reads and writes
- Storage hook → Local storage: reads and writes