BuildOn: How Har-Tru Lets Customers Design Custom Courts in the Browser

Har-Tru makes tennis court surfaces. Their customers -- clubs, resorts, homeowners -- want to see what their court will look like before they commit. What color for the playing surface? What about the surrounding area? Can we get our logo on it?

BuildOn is the tool that answers those questions. It's a browser-based court customizer that lets anyone design a tennis, pickleball, or basketball court with custom colors and branding, then download a professional PDF spec sheet.

The Design Problem

Court customization sounds simple until you think about it. A tennis court has distinct zones: the outer area (surrounds), the inner playing surface, and the lines. Each zone can be a different color. Pickleball adds a kitchen zone. Basketball adds a throw area and center circle.

Customers need to see all of these zones independently and pick colors for each one. They need to see the result in real-time. And they need to walk away with a document they can hand to their contractor.

Layer-Based Color System

Every court type is built from layers. A CourtBuildType (Tennis, Pickleball, Basketball) has associated CourtLayer records, each with CourtLayerOption choices.

The customer's design is stored as a JSON layer_map on the CourtBuild record:

{"outer": "#45603e", "inner": "#002752", "lines": "#ffffff"}

For pickleball, you get an additional kitchen key. For basketball, throw and center.

Each sport type has sensible defaults:

Tennis: Championship Green outer, Dark Blue inner, White lines
Pickleball: Championship Green outer, Light Blue inner, Dark Blue kitchen, White lines
Basketball: Championship Green outer, Light Blue inner, Leaf Green throw and center, White lines

Customers start with the defaults and customize from there.

The Color Palette

This isn't a free-form color picker. Har-Tru manufactures specific surface colors, and each one has a Pantone reference code. The CourtColor model stores the hex value alongside the Pantone equivalent (Dark Green is 19-0220 TPG, Championship Green is 19-0231 TPG, and so on).

The palette includes about a dozen options: greens, blues, grey, purple, red, orange, yellow, tan, and white. Each color is ordered by position for consistent display in the selector UI.

This constraint is intentional. Customers can't pick a color that Har-Tru can't manufacture. Every design is buildable.

Logo Uploads

Clubs and resorts want their logo on the court. BuildOn supports logo uploads via ActiveStorage. The logo gets composited onto the court design in the preview and carries through to the PDF.

The upload happens through an AJAX endpoint (update_logo) so the page doesn't reload. The preview updates in real-time.

No Authentication Required

This is a sales tool, not a SaaS app. Anyone can design a court without creating an account. BuildOn uses slug-based routing -- each court design gets a unique 10-character alphanumeric slug.

The CourtBuildsController skips authentication for the design, save, and PDF actions. If someone happens to be logged in (a Har-Tru sales rep, for instance), the design gets linked to their account. Otherwise, it's saved anonymously.

This means a sales rep can send a customer a link like hartru.com/build/a7f2k9m3x1 and the customer can view, modify, and download their design without any friction.

PDF Generation

The money feature. When a customer finishes their design, they hit "Download PDF" and get a professional spec sheet.

The PDF is generated through Adobe's PDF Services API. The flow:

The court design is rendered as an HTML view (the adobe action)
That HTML is sent to Adobe's API
Adobe converts it to a polished PDF
The PDF is returned to the customer for download

The PDF includes the court visualization with selected colors, customer details (name, job ID, notes), color specifications with Pantone codes, and the uploaded logo if present.

For production, there's a fallback to PDFMyUrl as an alternative converter. Belt and suspenders.

PDF filenames are personalized: "Har-Tru Custom Court Build" for anonymous users, "Har-Tru Custom Court - Jane Smith" for identified customers.

The Shareable Preview

Every court design has a shareable URL. Adding preview and shared parameters to any build URL shows a read-only view that anyone can access. Sales reps share these with customers, customers share them with their club boards, boards share them with contractors.

The design spreads without anyone needing to sign up, log in, or install anything.

Three Court Types, One System

The layer system scales cleanly across sports:

Tennis -- 3 layers (outer, inner, lines). Classic and straightforward.

Pickleball -- 4 layers (outer, inner, kitchen, lines). The kitchen (non-volley zone) is the distinguishing element.

Basketball -- 5 layers (outer, inner, throw, center, lines). More zones, more customization options.

Adding a new sport (futsal? volleyball?) means creating a new CourtBuildType with its layers and defaults. The UI, color picker, PDF generation, and sharing all work automatically.

The Technical Stack

BuildOn is a Rails app with a simple architecture. The interactive bits are handled with AJAX calls to update the layer map, logo, and customer details. Each change persists immediately -- no "save" button anxiety.

ActiveStorage handles logo uploads. The court visualization is rendered server-side and styled with CSS. The PDF pipeline uses RestClient to talk to Adobe's API.

The whole thing runs alongside Har-Tru's Shopify-powered e-commerce site. Customers can design their court, download the spec, and then buy the surface materials from the same brand.

Why It Works

BuildOn succeeds because it removes friction from the sales process. Before this tool, a customer would call Har-Tru, describe what they wanted, wait for a sales rep to mock something up, request changes, wait again. Days of back-and-forth for something that should take 5 minutes.

Now: open a link, pick your colors, upload your logo, download the PDF. Done. The sales rep's job shifts from "design courts for customers" to "help customers who've already designed their court place an order."

Self-service design with professional output. That's the whole pitch.

BuildOn was built by Loadout for Har-Tru. Need an interactive product customizer for your business? Get in touch.