← Back to portfolio

SpliceMe — Fiber Optic Network Documentation

2021 PHP · Laravel · Vue.js · PostgreSQL · Redis · HTML Canvas

SpliceMe is a documentation service for fiber optic networks. The main challenge was building a reliable visual editor for creating fiber optic network passports — the technical diagrams that document every splice, every fiber, every connection point in a cable network.

Projects dashboard

The editor problem

Sounds simple until you realize the editor has to work not just on a new MacBook Pro but also on ancient laptops with 4 GB of RAM that field engineers actually carry. These guys are standing at a splice closure somewhere on a highway, documenting what they just spliced. The app can't lag.

Building a vector editor from scratch

I built a basic vector editor from scratch in the browser using HTML Canvas. No heavy frameworks, no bloated libraries. Engineers can create fiber optic network diagrams, add splice points, document individual fibers, attach text info. The whole thing supports bulk operations — because when you're documenting a 96-fiber cable, you don't want to click 96 times.

Fiber optic splice diagram editor

Optimization rabbit hole

A lot of time went into optimization. Lazy rendering, viewport culling, efficient DOM updates. The kind of stuff where you spend a week shaving off 50ms, and then the field engineer doesn't even notice — they just know the app "feels fast." Worth it though. When something works on a 4 GB laptop without stuttering, it flies on everything else.

The result

Engineers can quickly create and maintain documentation, build network diagrams, and export everything to SVG and PDF. The service already has major telecom industry clients using it daily.

Project sheets overview