Case Study 7 of 7

Startup Tools / Productivity•2025•Live Demo

Spot: Org Hierarchy & Team Directory

Interactive Organizational Directory & 60 FPS Hierarchy Visualizer

My Role

Full-Stack Engineer & Interaction Designer

Timeline

2 Months

Team

Solo Project

Primary Stack

React, Tailwind CSS, Framer Motion

Visit Live App View Repository

Key Verified Outcomes & Metrics

60 FPS

Tree Render Speed

Smooth zoom and pan hierarchy navigation

<15ms

Search Speed

Instant in-memory filtering across 100+ profiles

Departments Mapped

Engineering, Product, Design, Sales, Support

JSON/CSV

Export Capabilities

Seamless org data import & export

Project Overview & The Core Problem

Help rapidly growing remote and hybrid startups understand who does what, visualizes reporting trees, and discover internal domain experts without confusing spreadsheets.

My Responsibilities & Contributions

Engineered an interactive, draggable org-chart visualization with Framer Motion layout animations.
Developed high-speed search and filtering by department, skill tags, and timezones.
Constructed a REST API in Node.js and Express to manage hierarchical tree data structures.
Implemented responsive cards with quick Slack, email, and LinkedIn connect shortcuts.

Technical Architecture

System Design & Component Flow

1. Frontend Client

React with Framer Motion gesture physics and drag canvas

2. Backend & APIs

Express.js REST API handling tree CRUD and department relations

3. Database / AI Tooling

MongoDB with parent-child adjacency list schema

Data Flow Pipeline

1. Ingest

Upload company roster via CSV or interactive builder

2. Parse

Algorithm builds normalized adjacency tree structure

3. Visualize

Framer Motion renders responsive nodes with reporting links

4. Explore

Filter by skillset, department, or locate team leads in <15ms

Engineering Challenges & Implemented Solutions

Building in the real world means encountering unexpected edge cases, latency bottlenecks, and technical trade-offs.

Challenge 01

Complex Tree Hierarchy Rerendering

Manipulating deeply nested team trees caused costly React rerenders and jank during pan/zoom.

Solution Implemented

Normalized State & Virtualized Nodes

Normalized tree nodes into flat lookup maps with memoized sub-branches to prevent unnecessary renders.

Challenge 02

Mobile Responsiveness for Wide Org Charts

Organizational charts naturally expand horizontally, making them notoriously difficult to use on small screens.

Solution Implemented

Adaptive Mobile Drill-Down

Introduced an accordion drill-down view on screens <768px while maintaining the canvas chart on desktop.

Technologies Utilized in Spot: Org Hierarchy & Team Directory

ReactTailwind CSSFramer MotionNode.jsExpressMongoDB

Core Capabilities Shipped

Smooth 60fps pan and zoom tree canvas with collapsible branch nodes
Instant search across team members by name, role, technology, and timezone
Adaptive mobile drill-down list view ensuring flawless small-screen usability
1-click export of organizational rosters to CSV and JSON formats

Final Outcome

Delivered sub-15ms client-side search filtering across 100+ profiles with an adaptive mobile drill-down view.