How mohammed-hashim18/dropzone works
DropZone is a browser-only file toolbox: users add files to a shared workspace, choose a tool, and can keep or reuse the resulting files. The README documents the tool families and a registry-driven, lazily loaded panel architecture. The excerpts show app routing, file-drop handling, workspace API, and several engines; panel-to-engine call details and some subsystem wiring are not sampled, so uncertain call edges are omitted.
Main entry points: registry.ts Tool Registry · App.tsx App Router · store.tsx Workspace Store · HomePage.tsx Tool Home
Components 28
Application
- App Router
src/App.tsx - App Shell
src/components/AppShell.tsx - Tool Home
src/pages/HomePage.tsx - Tool Route
src/pages/ToolPage.tsx
Shared Workspace
- Workspace Store
src/workspace/store.tsx - File Drop
src/workspace/useFileDrop.ts - File Selector
src/components/FileSelector.tsx - Results Tray
src/components/ResultsTray.tsx
File Tools
- Tool Registry
src/tools/registry.ts - Tool Runner
src/tools/panels/toolRun.ts - Base64 Panel
src/tools/panels/Base64Panel.tsx - CSV JSON Panel
src/tools/panels/CsvJsonPanel.tsx - Hash Panel
src/tools/panels/HashPanel.tsx - Image Panels
src/tools/panels/ImageCompressPanel.tsx - Convert Panel
src/tools/panels/ImageConvertPanel.tsx - JSON Panel
src/tools/panels/JsonPanel.tsx - Metadata Panel
src/tools/panels/MetadataPanel.tsx - PDF Merge Panel
src/tools/panels/PdfMergePanel.tsx - PDF Pages Panel
src/tools/panels/PdfPagesPanel.tsx
Processing Engines
- Base64 Engine
src/lib/base64.ts - CSV Engine
src/lib/csv.ts - JSON Engine
src/lib/json.ts - Hash Engine
src/lib/hash/index.ts - Image Engine
src/lib/image.ts - Metadata Engine
src/lib/metadata/index.ts - PDF Engine
src/lib/pdf.ts - PDF Renderer
src/lib/pdf-render.ts
Other components
- User
Connections 20
- User → App Router: uses
- App Router → App Shell: wraps routes
- App Router → Workspace Store: provides state
- App Router → Tool Home: routes to
- App Router → Tool Route: routes to
- User → File Drop: drops files
- File Drop → Workspace Store: adds files
- File Selector → Workspace Store: selects files
- Results Tray → Workspace Store: manages results
- Tool Home → Tool Registry: lists tools
- Tool Route → Tool Registry: resolves tool
- Tool Registry → Base64 Panel: loads panel
- Tool Registry → CSV JSON Panel: loads panel
- Tool Registry → Hash Panel: loads panel
- Tool Registry → Image Panels: loads panel
- Tool Registry → Convert Panel: loads panel
- Tool Registry → JSON Panel: loads panel
- Tool Registry → Metadata Panel: loads panel
- Tool Registry → PDF Merge Panel: loads panel
- Tool Registry → PDF Pages Panel: loads panel