HolaRoof Partner Portal: Roofing Design & Management

A full-stack digital platform that digitizes the entire roofing project lifecycle. It combines an intuitive browser-based design tool with automated material calculations and project management, allowing sales engineers to go from blank canvas to quote without leaving the tab.

Hero section of the Holaroof public website featuring a residential home with a red hybrid solar roof at sunset. The image highlights the product's aesthetic appeal for new builds and retrofits.

About the Client

HolaRoof manufactures hybrid solar roofing systems designed for both new builds and retrofit homes. Their solution integrates directly into the roof or installs on top of an existing one, creating a seamless, energy-generating surface.

Client HolaRoof
Link to the project see here
Start of the project June 2025
End of the project December 2025
 
 
 
 
 
1
1

Client brief

The Challenge: The Design-to-Quote Gap

Paper and Excel cannot scale. Before the Partner Portal, HolaRoof operated without a unified digital system. Roof designs were created using generic CAD tools or hand-drawn sketches.

  • Data in Silos: Design files lived locally, material lists in Excel spreadsheets, and client communications in scattered email threads. There was no single view of a project.
  • Manual Calculation Risks: Creating a Bill of Materials (BOM) required manually translating drawings into lists. This was slow and prone to human error—one wrong number meant ordering the wrong materials.
  • The Communication Barrier: Showing progress to a client meant exporting files and attaching them to emails. Clients couldn’t visualize their roof in real-time or track project status independently.

  • The sales gap: Sales teams didn’t have a centralized dashboard, making pipeline management and follow-ups inefficient.

The Solution: HolaRoof Partner Portal

Core Concept: A complete digital platform that transforms the workflow—from an intuitive visual canvas to automated order fulfillment.

Key Technical Components:

  • Interactive Design Canvas: A Figma-like tool directly in the browser. Users visually create and edit roof configurations using intuitive drawing tools, removing the need for complex CAD software.

  • Automated Bill of Materials (Auto-BOM): The system calculates required materials and quantities in real-time based on the canvas design. This eliminates manual spreadsheet work and calculation errors.
  • Project Lifecycle Management: A central hub connecting designs to orders. Every project gets an auto-generated code and status tracking (New → In Progress → Completed).
  • Dual-Track Order Management: Integrated workflows for both client quotes and supplier procurement. The system tracks payments, shipping details, and itemized line items.
  • Share Link Collaboration: Secure, expirable links allow clients to view project designs and status without creating an account. This replaces email chains with a transparent, self-service view.
  • Document & Media Hub: A centralized storage system for all project files and images. It includes features like “favorite image selection” for reports and archive management.
  • Rich Notes System: Threaded notes with rich text support attached directly to projects or orders. Notes can be internal-only or visible to the client.
  • Role-Based Architecture: A multi-tenant system with organization-based user management (Admin/App User) and strict field-level security.

Tech Stack: Next.js 15, ReactJS, MongoDB, AWS S3, TypeScript.

The Results & Impact

We delivered a full-stack digital platform from greenfield that digitizes the entire roofing project lifecycle—from visual design through material calculation to order fulfillment and client collaboration.

Organizational Change:

  • Sales Engineer Autonomy: Staff can now go from a blank canvas to a complete material quote in one tool, drastically reducing design-to-quote time.

  • Error Elimination: Automated BOM generation removes human error from material calculations.

  • Client Visibility: Share links provide clients with self-service access, reducing the support burden.

  • Pipeline Clarity: All projects, orders, and client relationships are visible in one centralized system.
  • Company-wide Collaboration – Multiple users per company can work on projects with appropriate permissions

Future Plans

The roadmap includes direct integration with supplier systems for direct order placement and an enhanced design templates and component libraries, and client portal for order approval workflows.