Important

This repository represents a public excerpt of a project made as part of an individual evaluation. It was initially completed within 5 hours and submitted on September 4, 2025.

Pathfinder

An interactive diagramming tool for creating and editing fishbone diagrams.

🛠️ Technical Architecture

• Rendering Engine: Canvex is a graphics library developed completely by myself from scratch with zero dependencies. While Canvex provides the rendering infrastructure, all diagramming logic was implemented during the evaluation period.
• Fullstack Framework: The frontend and backend was implemented using TypeScript and SolidStart, a meta-framework built for Solid.js.
• Database: SQLite was chosen for its portability to ensure a simple setup flow for evaluators.
• Tooling: Project utilizes ESLint and Prettier. Automated code generation with AI was not used during the evaluation period.

🚀 Setup

1. Clone the repository and navigate to the project root directory.
2. Configure the .npmrc file by replacing the placeholder value for CANVEX_TOKEN with your provided token.
3. Run npm install to install dependencies
4. Run npm run build:db to build the local database dependencies.
5. Run npm run dev to start the local development server.

👨‍🏫 Walkthrough

Note

Per the project's requirements, only 5 hours was allotted for design and implementation. Notes are included to highlight possible improvements to the user experience.

Demo

The approximate frame rate is displayed as the yellow number on the top-left corner of the canvas, which is capped at 120fps. This signifies smooth performance throughout the application.

Selecting a node

By hovering over a target node and clicking the left-mouse button, the node will be selected. To deselect, click on an empty area on the canvas or press Escape.

Adding a new node

The diagram can scale to an infinite number of nodes without any collisions or visual clutter. When a node is selected, an "Add Button" (represented by a blue circle with a plus icon) will be shown. Clicking on the button will immediately create a nested node.

Note

The current implementation centers newly created nodes instantly. A smooth scrolling animation would preserve user context and reduce cognitive disruption. Additionally, keyboard modifiers (e.g. Ctrl + Left Mouse Button) could allow node creation without automatic selection, supporting varied workflow preferences.

Editing a node

To enter Edit Mode, double click on a node. A dialog will be shown prompting you to enter a new text value. If an empty text is saved, the node will be deleted.

Note

The prompt-based editing flow is very disruptive and limits concurrent operations. A possible improvement could involve implementation of a dedicated Properties sidebar, which would provide superior affordance for metadata editing and node management operations.

Deleting a node

A selected node can be deleted by pressing the Delete or Backspace key on the keyboard. This will also delete any nested nodes.

Note

A dedicated Properties sidebar or context menu (accessible via right-click) would improve discoverability for non-keyboard-centric users. As a delete operation cascades to all descendant nodes, future improvements can be made to allow for preservation of child nodes.

Navigating around the canvas

Canvas panning is enabled through click-and-drag operations by using either the left or middle mouse buttons.

Note

Initial implementation only supported middle-mouse panning. With the feedback received from evaluators, panning with the left-mouse button was promptly implemented. Future enhancements could include a dedicated "Hand" tool which can be accessed via a global toolbar. Additionally, a "re-center" button should be implemented to avoid users from getting "lost" due to the canvas being infinite.

Zoom controls

The application supports multi-touch gestures. Zooming is achieved through either two-finger pinch gestures on a touchpad or via Control + Mouse Wheel for traditional pointer devices.

Note

Accessibility could be improved with dedicated keyboard shortcuts and a "Zoom" tool (i.e. a magnifying glass button) for users unfamiliar with keyboard-based interactions.

🗒️ License

Copyright © 2025 Kyedo (https://github.com/itskyedo). All rights reserved. This repository is provided for demonstration and review purposes only. No license is granted for use, reproduction, modification, or distribution.