SlabFit

Problem

SlabFit sizes display cases for graded collections. A free calculator takes the exact collection (grading company, quantity, layout and fit tightness) and returns the interior dimensions an acrylic case needs: width, depth and height in millimeters and inches, plus volume.

A one-time paid plan adds a dimensioned layout diagram, cut-to-size padding specs, a UV and humidity placement guide, and a Collection Log that can be exported as CSV for insurance.

Constraints & decisions

• "Typical — verify with calipers." Default slab and box dimensions carry that label, and every dimension has a "measure mine instead" override. The labeling is deliberate: shell sizes vary by generation and edition.
• One geometry module. convex/shared/fit.ts holds all case-fit geometry, including the typical dimensions and the tightness buffers. The free calculator in the client and the paid plan on the server use the same code.
• Paid logic stays on the server. The plan generator checks identity and entitlement before it does anything, and it is never included in the client bundle. Every Collection Log function is entitlement-gated as well.
• No secrets in the repo or the frontend. All tokens live in the Convex deployment environment, written there by a provisioning script. The only keys handled by hand are a Polar access token, a Resend API key and, at deploy time, a Convex deploy key.
• Polar as merchant of record. Checkout is Polar's hosted page for a one-time product. The webhook is verified against the raw request body before anything in it is read, and grants are idempotent.
• Purchases belong to user ids. A purchase is attributed by the Convex user id passed to checkout, never by matching email addresses.
• Sandbox and production stay separate. They use separate Polar logins, tokens, products and webhooks. The provisioning script recreates the whole setup in production with one command.

Solution

The frontend is Vite, React, TypeScript, Tailwind CSS and React Router, built as a static site on Netlify. Convex holds the schema, the queries, mutations and actions, and the HTTP webhook endpoint. Convex Auth signs users in with a magic-link email sent through Resend. Polar's order.paid webhook writes an entitlement row.

Because Convex queries are reactive, the success page changes from "confirming" to "unlocked" when the webhook lands, without a refresh.

Outcome

As built, SlabFit is a free case-sizing calculator with a one-time paid plan for the layout diagram, padding specs, placement guide and Collection Log.