Every year brings another list of twenty web development tools nobody verified. This article is the opposite. It is a tour of the toolchain that builds and serves this website, with version numbers, resource limits, and costs taken from the repository on 2026-09-24. The site runs 164 tool routes and 182 blog entries through this pipeline, so every decision below carries production weight.
Build tool, Vite 7 with hand written chunking
The build is Vite 7.3.1 with React 19.2.4. The interesting part is the manualChunks function in vite.config.ts, which assigns every dependency to a named chunk. React, ReactDOM, and Scheduler become vendor-react. Framer Motion becomes vendor-motion. The router stack becomes vendor-router. Tesseract.js becomes vendor-ocr, and heic2any becomes vendor-heic, because those two are the heaviest tools on the site and most visitors never open them. Icons, the blog data, and each language's translation and SEO files each get their own chunk, per language.
The rule behind the list is simple. Code for a page you might never visit sits in a chunk you never download. The HEIC converter and the OCR tool each pull a large library, and isolating them keeps the entry bundle small for everyone else.
The same config precompresses js, css, json, svg, and font outputs to gzip during the build, so the server ships prebuilt gzip files instead of compressing on the fly.
Language and UI baseline
TypeScript 5.9.3 typechecks the whole app with a 4096 MB heap, and the CI pipeline blocks merges on that check. ESLint 9 with the react-hooks plugin runs in the same gate. Husky and lint-staged run eslint with fix on staged files at commit time, so formatting errors never reach the shared history.
The UI layer is Tailwind CSS 3.4.1, framer-motion 12.38.0 for transitions, zustand 5.0.12 for state, and lucide-react 0.576.0 for icons. None of these choices is exotic, and that is the point. The site's differentiation is the tool catalog, so the framework budget goes to boring, stable parts.
SEO tooling wired into npm scripts
The SEO work lives in scripts that run like code, with package.json exposing them as npm tasks. The seo audit task runs a static audit limited to 80 pages plus a content quality audit. There is a dedicated AdSense risk audit, a blog localization audit with a strict mode, and a live smoke test against the deployed site.
Vite's closeBundle hook chains the sitemap generator, the static SEO shell renderer, and the OG image generator after every production build. Sitemaps and social images are therefore build artifacts, checked into the pipeline like compiled code, and they can never drift from the source data the way hand maintained exports do.
Container and serving layer
The Dockerfile has two stages. The builder runs node:20-alpine, skips the Puppeteer download, installs dependencies with a 512 MB heap, and builds with a 4096 MB heap. The runner is nginx:1.29-alpine serving the static output, with a healthcheck hitting localhost every 15 seconds, a 5 second timeout, a 15 second start period, and 3 retries.
nginx.conf sets the caching policy. Assets under /assets/ expire after one year with an immutable cache header, because the build hashes filenames. ads.txt gets one hour. The service worker files are marked no-cache so every deploy revalidates them immediately.
Delivery through Helm, Traefik, and Cloudflare
The site deploys as a Helm chart. The values file pins one replica with limits of 256 Mi memory and one CPU, requests of 64 Mi and 100 millicores, served over a ClusterIP on port 80. A cloudflared sidecar runs the Cloudflare Tunnel with its own limits of 128 Mi and 500 millicores, carrying traffic from the Cloudflare edge to the cluster service without an open ingress port.
In front sits a Traefik ingress with two middlewares attached, an IP whitelist and a rate limit, for the hosts webrecast.com and www.webrecast.com with TLS termination. Images come from a private Harbor registry, harbor.ragemmo.com, whose self signed certificate is fetched and trusted inside the CI job at runtime.
The CI itself runs on a self hosted runner labeled webrecast-linux-amd64, Node 20, and gates every push through typecheck, lint, sitemap generation, and a full build before Docker build and push. Concurrency settings cancel superseded runs on the same branch.
What this stack costs
One replica means every deploy briefly drops in-flight connections. Zero downtime would need a second replica and a rollout strategy, which the values file does not request.
The runtime memory limit of 256 Mi is far below the 4096 MB the build itself needs. That gap is deliberate, because heavy work stays in CI, but it also means nobody can run heavy workloads inside the serving container without hitting the wall.
The cloudflared image is pinned to latest, so tunnel upgrades arrive uncontrolled and untested. The Harbor certificate trust step is network dependent, and the workflow itself notes that it skips silently when the registry is unreachable from the runner. Self hosted runners also carry OS maintenance work that hosted runners externalize.
None of these costs is hidden in this repository, which is the actual argument of the article. A stack you can read end to end is easier to trust than a list of twenty tools.
Stack review checklist
- [ ] Heavy dependencies isolated into their own chunks.
- [ ] Gzip artifacts produced at build, with the server only shipping files.
- [ ] Sitemap, shells, and OG images generated inside the build pipeline.
- [ ] Typecheck and lint blocking CI, with the same checks on commit.
- [ ] Static assets on immutable year long cache, service worker on no-cache.
- [ ] Healthcheck intervals and resource limits written down and reviewed.
The chunking strategy above is easiest to see on a page that owns one of the big isolated chunks. Open the [HEIC converter](/heic-converter) and watch the network tab, and the vendor-heic chunk loads alone instead of weighing down the entry bundle. If your stack makes a different tradeoff on any line above, or you run the same pieces with different limits, that comparison would make this tour more useful.
