TOOLING — ACTIVE DEVELOPMENT
Nodeger
One screen replaces calendar, task tracker, and timer — drag-and-drop task nodes on a 30-day grid.
AT A GLANCE
- STATUS
- ACTIVE DEVELOPMENT
- TIMELINE
- 2025-08 — 2025-09 · 5 DAYS
- LANGUAGES
- TypeScript / JavaScript / CSS
- CATEGORY
- TOOLING
SOURCE FILES
OUTCOME
A working prototype with a viewport-culling renderer built to hold 200+ nodes at a 60fps target, browser auto-save, and its own honest debt audit on the record — built in 5 days.
METRICS
M.01 — SOURCE FILES
Full front-end application including hooks, stores, components, and feature modules. Excludes .vite build cache and graphify-out directories present in the repo.
M.02 — TYPESCRIPT / JAVASCRIPT LINES
TypeScript/TSX source lines in src/ (.ts: 6,485 + .tsx: 8,126 = 14,611 TypeScript; plus ~109 lines in root .js utilities). The stats.json .js total of 31,264 is build-cache files in .vite/, not source.
M.03 — COMMITS
Built and iterated in 5 days (2025-08-30 to 2025-09-03)
M.04 — BUILD WINDOW
First commit to last commit: 2025-08-30 through 2025-09-03
THE CASE, CHAPTER BY CHAPTER
CH.01
The problem
Planning multi-day work forces you across three apps and re-entering the same data in each. A calendar tracks dates, a task tracker tracks ownership, a timer tracks effort — and none of them talk. Standard tools also lock every task into an identical box, so scope, dependencies, and who-owns-what never show on one screen.
CH.02
What it delivers
One screen shows the entire status of a multi-day project — scope, progress, owner, and dependencies — with no app-switching. Each task is a node you drag, resize, and connect on a 30-day grid. Nodes span multiple days, carry live timers, and link with bezier lines; color tags assign owners at a glance. Node height signals scope, timer state signals progress, lines signal dependencies.
CH.03
How it works
An event bus keeps every feature fully decoupled, so any part can be replaced or tested in isolation. The calendar and node systems never import each other — they talk only through typed events like canvas:click and node:move, with state in per-feature Zustand stores. A virtual renderer draws only on-screen nodes (plus a 20% buffer), built to hold 200+ nodes at a 60fps target. Four performance modes trade visual effects for speed on demand; work auto-saves to the browser on a short debounce.
CH.04
One component, every node type
Adding a new node type means writing a config object, not a new component. Task, Description, and Backdrop nodes all render from a single master component driven by a type definition. Consolidating to this pattern removed 1,200+ lines of duplicate code and cut duplication from ~20% to under 5%.
CH.05
Honest engineering, on the record
Every tradeoff and known weakness is documented in the repo — written by Danylo, not a reviewer. The README names the exact gaps: a large node store to split, console logs to strip, and 0% test coverage, alongside a dated refactoring roadmap. Each feature folder ships an AI modification guide marking what is safe to change. This is a prototype built for fast iteration, with the debt accounted for rather than hidden.
THE BUILD, WEEK BY WEEK
51 COMMITS — IN 5 DAYS — AVG 10/DAY
FEATURES
| Calendar grid canvas | Tasks live on a 30-day timeline with per-day expandable rows and grid-snapping placement. |
|---|---|
| Rubber-band resize | Nodes resize with elastic resistance, snap magnetically to the grid within 20px, and settle with a spring animation. |
| Node timer system | Each node carries its own play/pause/finish timer with accumulated time and long-press shortcuts. |
| Visual connections | Drag any node's port to another to show a dependency, drawn as a cached bezier or straight line. |
| Virtual rendering | Only on-screen nodes render (plus a 20% buffer), so the canvas is built to stay near its 60fps target with 200+ nodes in play. |
| Performance modes | Four modes progressively strip blur, shadows, and animations to trade appearance for frame rate. |
ARCHITECTURE
| Core / Event bus | Mitt singleton; all cross-feature communication goes through typed events |
|---|---|
| Calendar feature | 30-day grid, row expansion, cell coordinate system, canvas click events |
| Nodes feature | Master node component, drag/resize hooks, timer state machine, collision resolution, virtual renderer |
| Nodes / Connections subsystem | Dynamic input/output ports per node, bezier path rendering, path cache, drag-to-connect (FastConnections.tsx lives inside the nodes feature directory) |
| Performance settings | Four rendering modes persisted to localStorage; controls will-change, blur, animation toggles |
STACK
SKILLS DEMONSTRATED
Builds interactive web tools that replace several apps with one · Keeps the UI fast under heavy load (renderer built for 200+ nodes) · Designs features that stay decoupled and cheap to change · Cuts duplicate code through reusable, config-driven components · Ships fast (working prototype in 5 days) without overselling it · Documents tradeoffs and debt honestly for clean handoff · React, TypeScript, and Zustand state management
THE CODE, MAPPED
SHOWING THE 350 MOST CONNECTED OF 1,018 NODES · 2,060 EDGES · 92 COMMUNITIES — EXTRACTED FROM THE CODEBASE BY TREE-SITTER
