Milimetrica
The project, in plain words.
Milimetrica is a small web app that helps students draw clean, graph-paper-style graphs without manually measuring and placing every point by hand. You enter your X and Y values, choose a real-world scale, and it plots accurate points on a millimeter grid.
The canvas is a true-to-paper grid with 1 mm minor, 5 mm medium and 10 mm major lines. Each point is rendered as a dot with dotted helper lines projected to both axes, and hovering reveals the original values. The internal model already supports multiple datasets, so the app can grow without a rewrite.
It's built with Next.js 15, React and TypeScript, rendered entirely in SVG with a viewBox mapped 1:1 to millimeters — so the geometry stays exact and print/export remain straightforward later. It's deployed on Vercel as a subdomain of this site.
What I actually shipped.
- Shaped the product from a rough idea into a focused V1 spec — graph-paper canvas, comma-separated value input, physical scale configuration, and point rendering.
- Built a millimeter-accurate coordinate model where 1 SVG unit equals 1 logical millimeter, keeping grid lines and point math exact.
- Implemented value parsing and validation with clear inline errors, plus warnings when points fall outside the visible paper.
- Rendered the layered 1/5/10 mm grid, axes, points and dotted helper lines as composable SVG, with hover tooltips showing the original values.
- Designed a data model that supports multiple graph layers from the start, and deployed the app to Vercel as a subdomain.
Three problems worth talking about.
Millimeters as the unit
The SVG viewBox maps directly to millimeters — 1 unit = 1 mm. Grid lines fall on integer millimeters, point positions are computed in millimeters, and printing or exporting to real paper stays simple because the geometry never leaves paper space.
Paper language, not pixels
Instead of asking for 'pixels per unit', the scale model speaks in paper terms: an amount of value maps to a number of millimeters, per axis, independently. The UI is built for students, not just developers.
Multi-dataset from day one
Even though V1 ships with a single-graph workflow, the internal model supports multiple graph layers from the start — so 'add another graph' never turns into a rewrite.