Overview
Figuring out how many solar panels would fit on a roof — and how much yield they would generate — used to be a slow, manual task. Autarco wanted to simplify it with a web-based design tool: let dealers and customers design a system by simply drawing their roof on a satellite map, then have the tool work out how many panels fit and how much power they'd produce.
I delivered a working solution built with React, TypeScript, Turf.js, and a number of supporting libraries. Here it is in action:
The challenge
A tool like this looks simple on the surface and is anything but underneath. The hard parts included:
- Implementing drawing functions on top of a third-party map provider
- Optimising geospatial calculations so results came back fast, entirely in the browser
- Integrating complex geospatial algorithms in close cooperation with physics experts
What I built
Users draw the outline of their roof directly on a satellite map. From that shape, the tool packs panels into the available area, accounts for the constraints that matter, and estimates the energy the layout would generate — all client-side, so the feedback loop stays instant as people adjust their design.
Getting the geometry right meant leaning on Turf.js for the geospatial primitives and working hand-in-hand with the physics side to make sure the yield numbers reflected reality, not just area.
Outcome
The result was a design tool that turned a time-consuming, expert-led calculation into something a dealer or customer could do themselves in a few minutes, directly in the browser.