2022 to 2026 · Rebuild · Foreign trade
R-Trade
A 2022 Gulp and Webpack site for a foreign trade firm, rewritten line by line on Next 16 with three production dependencies in total.
- Next.js 16
- React 19
- TypeScript 6
- FSD
- CSS Modules
- Vitest
- production dependencies: next, react, react-dom
- 3
- assets, before and after
- 52 MB to 2.4 MB
- SVG components from the legacy icon font
- 18
- client agent for hover on touch screens
- 1
What I walked into
The main site of the foreign trade firm where I joined as a developer and left leading a small team, built in 2022 on Gulp and Webpack.
Its assets weighed 52 MB, and its icons came from a legacy icon font.
What I changed, and why
Three dependencies in production
next, react and react-dom. Everything else is pinned exactly in devDependencies.
Hover that works on touch
A client agent maps hover state onto scroll position under (hover: none), and sections opt in through data attributes so they stay server components.
A bug worth keeping
An IntersectionObserver with root: Element never checks whether the root itself is on screen, which left catalogue cards lit forever.
The icon font, taken apart
opentype.js turned the legacy font into 18 currentColor SVG components.
A calendar under test
The consultation calendar is unit-tested, including a Sunday-start month and a leap February.
Hover on touch devices is solved once for the whole site.
Where it landed
The site runs on Next 16 with three production dependencies, and its assets went from 52 MB to 2.4 MB.
One agent gives the whole site hover on touch, the icons are 18 SVG components, and the calendar edge cases are covered by tests.