TOOLINGACTIVE DEVELOPMENT

Nodeger

One screen replaces calendar, task tracker, and timer — drag-and-drop task nodes on a 30-day grid.

AT A GLANCE

AT A GLANCENODEGER
STATUS
ACTIVE DEVELOPMENT
TIMELINE
2025-08 — 2025-09 · 5 DAYS
LANGUAGES
TypeScript / JavaScript / CSS
CATEGORY
TOOLING
0

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.

Nodeger cover

METRICS

0

M.01SOURCE FILES

Full front-end application including hooks, stores, components, and feature modules. Excludes .vite build cache and graphify-out directories present in the repo.

~14.6k lines

M.02TYPESCRIPT / 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.

51 commits

M.03COMMITS

Built and iterated in 5 days (2025-08-30 to 2025-09-03)

5 days

M.04BUILD 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

45 COMMITS — PEAK WEEK25 AUG 202501 SEP 2025

51 COMMITS — IN 5 DAYS — AVG 10/DAY

JavaScript
60.3% 31.3K
TypeScript
28.2% 14.6K
Config
8.4% 4.4K
Docs
2.6% 1.4K
Python
0.4% 206

FEATURES

Calendar grid canvasTasks live on a 30-day timeline with per-day expandable rows and grid-snapping placement.
Rubber-band resizeNodes resize with elastic resistance, snap magnetically to the grid within 20px, and settle with a spring animation.
Node timer systemEach node carries its own play/pause/finish timer with accumulated time and long-press shortcuts.
Visual connectionsDrag any node's port to another to show a dependency, drawn as a cached bezier or straight line.
Virtual renderingOnly 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 modesFour modes progressively strip blur, shadows, and animations to trade appearance for frame rate.

ARCHITECTURE

Core / Event busMitt singleton; all cross-feature communication goes through typed events
Calendar feature30-day grid, row expansion, cell coordinate system, canvas click events
Nodes featureMaster node component, drag/resize hooks, timer state machine, collision resolution, virtual renderer
Nodes / Connections subsystemDynamic input/output ports per node, bezier path rendering, path cache, drag-to-connect (FastConnections.tsx lives inside the nodes feature directory)
Performance settingsFour rendering modes persisted to localStorage; controls will-change, blur, animation toggles

STACK

LANGTypeScriptJavaScriptCSS
FXReact 19ZustandFramer MotionVite
INFRAlocalStorage (persistence)RAF throttling (drag/resize)

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

GRAPH