Project Details:
InVison’s Freehand product (a digital whiteboarding tool) previously had an inspect add-on tool that would direct users to a different view where they could inspect different elements of artboards/frames that had been imported into the application via Adobe XD or Figma. The tool would show various CSS elements for padding, margins, colors, etc to help with the design hand-off process between engineers and designers.
On my team, one of the backend engineers updated the Inspect API endpoints, so I was tasked with hooking the new endpoints up with the existing frontend architecture. I worked on researching the legacy codebase used to render the frontend (built with an older version of React) and then worked with the Freehand team to make changes to their repo in order to give the Inspect frontend access to the data we needed (i.e. fetching layer data and asset data from the new endpoints).
While working on the project, we later learned that another team within the company was working on redesigning the Inspect tool experience so that users could seamlessly inspect artboards and frames without leaving Freehand’s canvas view. On learning about the other team’s project, I pivoted to help their team out temporarily to roll out the changes necessary to connect the new UI to the newer endpoints. I created a few draft PRs so that the other team could see the approach I took on my previous project. Then I worked on implementing the work required within the Freehand repo as well as the frontend team’s new codebase for the Inspect UI. Overall, the experience turned out to be very collaborative.
Technology Used:
- React
- Redux
- TypeScript
- Styled Components
