Scaling a Single React App to 71+ Browser-Based Tools Without Killing Load Time
The problem with "just add another tool" When you're building one image tool, performance is easy. When you're building 71 of them in the same app — resize, compress, crop, PDF merge, format converters, exam-photo presets, social media templates — the naive approach (import everything, bundle it all together) turns your app into a multi-megabyte JavaScript payload before a user has even picked a tool. This is the actual engineering problem behind ResizeHub , which now has 71+ tools across 11 categories, all running client-side with zero server uploads. Here's how the architecture holds up at that scale. Stack, and why each piece earns its place React + TypeScript — type safety matters more, not less, as tool count grows. A shared ImageProcessor interface that every tool implements catches integration bugs at compile time instead of in production. Vite — its native ES modules dev server and Rollup-based production build made code-splitting dramatically easier to reason about than older bundlers, which matters a lot once you have dozens of independent tool routes. HTML5 Canvas API — the actual compression/resize/crop engine, shared across tools rather than reimplemented per-tool. Cropper.js — for interactive cropping UI specifically (aspect-ratio locking, circular crop for signatures) rather than rebuilding drag-handle math from scratch. Pica — for high-quality image downscaling; the browser's native canvas scaling can introduce visible aliasing on large downscales, and Pica's algorithm handles this noticeably better. Cloudflare Pages — static hosting with edge caching, which matters since 100% of the actual processing work happens in the user's browser, not on any server at all. Lesson 1: Route-level code splitting isn't optional past a handful of tools With React Router and dynamic import() , each tool becomes its own chunk: const PhotoResizer = lazy (() => import ( ' ./tools/PhotoResizer ' )); const PdfCompressor = lazy (() => import ( ' ./tools/PdfCompressor ' ));