Milimetrica
Proiectul, pe scurt.
Milimetrica este o aplicație web mică ce ajută elevii să deseneze grafice curate, în stil hârtie milimetrică, fără să măsoare și să plaseze manual fiecare punct. Introduci valorile X și Y, alegi o scară reală, iar ea trasează puncte exacte pe o grilă milimetrică.
Canvasul este o grilă fidelă hârtiei, cu linii minore de 1 mm, medii de 5 mm și majore de 10 mm. Fiecare punct este desenat ca un punct, cu linii ajutătoare punctate proiectate spre ambele axe, iar la hover apar valorile originale. Modelul intern suportă deja seturi multiple de date, așa că aplicația poate crește fără rescriere.
Este construită cu Next.js 15, React și TypeScript, randată integral în SVG cu un viewBox mapat 1:1 pe milimetri — astfel geometria rămâne exactă, iar tipărirea/exportul rămân simple ulterior. Este găzduită pe Vercel ca subdomeniu al acestui site.
Ce am livrat efectiv.
- Am modelat produsul de la o idee brută la o specificație V1 concentrată — canvas de hârtie milimetrică, input de valori separate prin virgulă, configurarea scării fizice și randarea punctelor.
- Am construit un model de coordonate exact în milimetri, unde 1 unitate SVG egalează 1 milimetru logic, păstrând liniile grilei și calculul punctelor exacte.
- Am implementat parsarea și validarea valorilor cu erori clare inline, plus avertismente când punctele ies din hârtia vizibilă.
- Am randat grila stratificată de 1/5/10 mm, axele, punctele și liniile ajutătoare punctate ca SVG componabil, cu tooltip-uri la hover ce arată valorile originale.
- Am proiectat un model de date care suportă straturi multiple de grafice de la început și am implementat aplicația pe Vercel ca subdomeniu.
Trei probleme care merită discutate.
Milimetrii ca unitate
ViewBox-ul SVG se mapează direct pe milimetri — 1 unitate = 1 mm. Liniile grilei cad pe milimetri întregi, pozițiile punctelor se calculează în milimetri, iar tipărirea sau exportul pe hârtie reală rămân simple pentru că geometria nu părăsește niciodată spațiul hârtiei.
Limbaj de hârtie, nu pixeli
În loc să ceară 'pixeli per unitate', modelul scării vorbește în termeni de hârtie: o cantitate de valoare se mapează la un număr de milimetri, pe fiecare axă, independent. Interfața e gândită pentru elevi, nu doar pentru programatori.
Multi-set de date din prima zi
Deși V1 livrează un flux cu un singur grafic, modelul intern suportă straturi multiple de grafice de la început — așa că 'mai adaugă un grafic' nu devine niciodată o rescriere.