kraco.dev

For this contract, I developed a graph-based data visualization system that enables clients to explore organizational business structures, gift/debt relationships, and family trees in real time. My development work enabled product demos and supported the company’s transition from pre-seed to seed stage.

📌 Key Accomplishments

Organizational Tree Visualization & Optimization

• Developed an interactive organizational tree system with dynamic node management
• Optimized the React Flow-based layout engine, improving rendering speed and preventing UI lag
• Created a context menu for intuitive entity modifications, allowing users to show/hide elements effortlessly
• Implemented node hiding functionality—both manual and default—for industry-specific customization
• Enhanced relationship mapping accuracy with edge refinements and proper alignment
• 🔗 Tech Used: React Flow, Zustand, TypeScript, Supabase

Default Visualization with Hidden Nodes by Type

Option for Manual Hiding of Individual Nodes or Descending Trees

Fully Exploded View

Unlock and Update Node Positions for Dynamic Re-Layouting

Hiding Descendants Without Breaking Other Relationship Trees

Family, Debt, and Gifting Relationship Mapping

• Developed and augmented a layout algorithm for visualizing wide and tall family trees from dynamic data
• Improved debt and gifting visualizations, adding entity ownership summation
• Enhanced edge alignment and precision to ensure relationships were displayed clearly and without overlap
• Integrated Graphviz-based layouts for a more structured and scalable graph visualization approach
• Used simpler Dagre and D3.js layout engines when hierarchy depth was <2 to improve load speed and reduce memory usage
• 🔗 Tech Used: React Flow, Graphviz, TypeScript, Supabase

🛠 UI/UX Enhancements & Performance Improvements

• Implemented React Query-based state management to streamline API calls and improve responsiveness
• Developed a modular component system for reusable and scalable UI elements
• Created legends and tooltips to improve user understanding of complex financial relationships
• Enabled real-time updates for hierarchical structures, ensuring all node and edge changes reflected dynamically
• Fixed layout inconsistencies affecting rendering speed and visibility across different hierarchy depths

🔑 Technical Contributions

• Refactored node/edge layout engines to improve rendering performance and eliminate unnecessary re-renders (primarily by removing useEffect dependencies)
• Reduced redundant database calls by aggregating data using Supabase views and implementing key-based caching via React Query
• Developed intuitive UI controls for entity management, visibility toggles, and dynamic relationship mapping
• Implemented asynchronous data fetching and lazy loading to improve app performance and UX
• Built component-based state trees using React Context and Zustand, supporting separation of concerns and reducing state maintenance overhead

⚙️ Technologies & Tools

• Frontend: React, Next.js, TypeScript, TailwindCSS
• Backend: Supabase, PostgreSQL, Node.js
• Data Visualization: React Flow, Graphviz, Dagre, D3.js
• State Management: React Query, Zustand, React Context