How naham6/image-resizer works
This workspace contains several separate products rather than one end-to-end application: a private, browser-local image resizer; a component preview sandbox; an Express API server; and shared API/database libraries. The primary user workflow is selecting an image, choosing resize parameters, rendering locally, and downloading the result. The image-resizer excerpts support the rendering and privacy behavior; sandbox component discovery is partly inferred from the plugin and renderer, while API route details are unsampled.
Main entry points: src/App.tsx Resize Interface · src/App.tsx Preview Router · app.ts Express Middleware · custom-fetch.ts Fetch Client
Components 23
Image Resizer
- Browser Entry
artifacts/image-resizer/src/main.tsx - Resize Interface
artifacts/image-resizer/src/App.tsx - Selected Image
- Resize Settings
artifacts/image-resizer/src/App.tsx - Image Rendering
artifacts/image-resizer/src/lib/image-utils.ts - Rendered Image
artifacts/image-resizer/src/App.tsx - Download Result
artifacts/image-resizer/src/App.tsx
Component Preview
- Preview Router
artifacts/mockup-sandbox/src/App.tsx - Component Modules
artifacts/mockup-sandbox/src - Rendered Preview
artifacts/mockup-sandbox/src/App.tsx
API Server
- Express Middleware
artifacts/api-server/src/app.ts - API Routes
artifacts/api-server/src/routes/index.ts - Health Route
artifacts/api-server/src/routes/health.ts - Request Logger
artifacts/api-server/src/lib/logger.ts
Shared Libraries
- Fetch Client
lib/api-client-react/src/custom-fetch.ts - API Specification
lib/api-spec - Zod API Types
lib/api-zod/src/index.ts - Database Client
lib/db/src/index.ts - Database Schema
lib/db/src/schema/index.ts
Other components
- Image User
- Canvas User
- API Caller
- PostgreSQL
Connections 22
- Image User → Browser Entry: opens
- Browser Entry → Resize Interface: renders
- Image User → Selected Image: selects
- Selected Image → Resize Interface: supplies
- Image User → Resize Settings: chooses
- Resize Settings → Resize Interface: configures
- Resize Interface → Image Rendering: renders locally
- Image Rendering → Rendered Image: returns
- Resize Interface → Download Result: offers download
- Rendered Image → Download Result: provides file
- Canvas User → Preview Router: opens
- Preview Router → Component Modules: loads module
- Preview Router → Rendered Preview: renders component
- API Caller → Express Middleware: sends request
- Express Middleware → Request Logger: logs request
- Express Middleware → API Routes: dispatches
- API Routes → Health Route: routes health
- Fetch Client → API Caller: issues configured requests
- Database Client → Database Schema: uses schema
- Database Client → PostgreSQL: connects
- API Specification → Fetch Client: configures generation
- Zod API Types → Fetch Client: shares types