An online sales and design visualizer. Empower buyers to choose trailer types, lengths, place equipment, inspect wraps, and request precise quotes directly from their browser.
Technical Discovery Brief & MVP Roadmap. A lightweight, serverless React + R3F configuration engine with a Cloudflare worker D1 storage pipeline.
Real GLB assets: pick a front cabin, then attach a food box accessory (Stand Inside / Walk Around). This is the actual product idea — not the MVP sketch. Switch to 2D Plan for the old equipment-layout sandbox.
Proof viewer for real GLBs in FRONT CABINS and WITH TRAILERS. Serve this folder over HTTP (not file://) so models can load.
A static catalog forces customers to guess layout and workflow. The interactive builder converts uncertainty into purchase confidence.
Buyers can inspect space limitations, resolve workflow safety, and align requirements before engaging in a sales callback.
Eliminate endless configuration adjustments. Sales staff receive structured configuration plans (BOM & JSON layout data) inside the CRM.
Designs generate a persistent shareable URL, letting buyers present configs directly to investors, health departments, or business partners.
Explore the end-to-end buyer journey mapping or deep-dive into the backend asset pipeline configuration details.
Click any workflow step node on the left to reveal details about the user actions and CRM interactions.
The buyer arrives on the configurator SPA via marketing campaigns or search landing pages. The app initializes a secure, anonymous session. No login or signup barriers are presented to minimize funnel drop-off.
UX Priority: Instant rendering of the default 3D layout to capture initial engagement.
The buyer decides the structural shell: Hot Kitchen (fryers, flat-tops) vs. Cold/Beverage (espresso machines, display fridges). They select the trailer length (16ft, 22ft, etc.), which resizes the 3D bounds and updates snap guidelines.
System Action: Three.js swaps the container shell and recalibrates collision limit boxes.
Using snap-to-wall mechanics, the buyer positions equipment on the kitchen wall (Side A) or serving wall (Side B). Collisions prevent items from stacking. The builder runs rules checks: for example, warning the user if a gas fryer is added but no ventilation canopy is installed.
Buyers select external features like an awning, backup cameras, or a diesel generator package. They swap wrap presets to visualize basic branding styles. Custom design coordinates are saved directly to the JSON state.
The buyer views a complete summary with a Bill of Materials (BOM) list. They submit their contact information, which pairs their personal details with the layout JSON string and sends the configuration data directly to the CRM webhook.
Click any architecture step node on the left to review build pipelines, asset storage, and hosting details.
Original manufacturing shells and commercial kitchen equipment are modeled in SketchUp. These designs represent exact real-world footprints and clearances needed for manufacturing layouts.
SketchUp models are exported as GLB formats, cleaned in Blender to eliminate excess vertices, merged by material, and compressed using Draco encoding. This reduces file sizes from 40MB down to sub-1.5MB for fast loading in browser viewports.
The client application runs a React-Three-Fiber scene inside a standard browser viewport. Static compressed assets (GLBs) are streamed from Cloudflare R2 CDN, caching structures locally to ensure smooth 60fps rotations and transitions.
User configurations are serialized into structured JSON. A lightweight Cloudflare Workers server handles persistence. Saved designs are committed to Cloudflare D1 (serverless SQLite database) returning an anonymous hash link (e.g. /b/k9a8d1).
When leads are submitted, the Cloudflare worker compiles a notification webhook. It sends contact fields, a PDF layout summary placeholder, and the configuration JSON payload to the CRM (e.g., HubSpot) or triggers emails via SendGrid.
Decoupled, edge-native web stack optimized for maximum loading performance and zero running infrastructure maintenance costs.
Vite provides near-instant HMR developer speeds. React Three Fiber + Drei translates Three.js scenes into declarative React components, simplifying interactive state synchronization.
Draco compression ensures model geometry is encoded into binary buffers. Streamed assets load incrementally, ensuring immediate responsiveness on mobile and tablet browsers.
Hono runs on Cloudflare Workers edge nodes globally, keeping response latencies under 50ms. Renders static landing pages with Cloudflare Pages for optimized global CDN delivery.
Serverless SQLite database natively integrated into Cloudflare. No cold starts, high throughput, and automatic replica backups. Perfect for structured lead metadata and configuration storage.
S3-compatible bucket storage with zero egress fee charges. Hosts optimized GLB models and wrap textures, slashing operational bandwidth hosting bills.
Strict runtime TS validation ensures saved layout arrays match the schema rules. Prevents bad payload injections or corrupted layout links on customer reloads.
A phased delivery schedule starting with a fast launch MVP focusing on qualified sales capture, rather than full production CAD details.
Focuses on core user value: visual layout creation and quote submission.
Introduces administrative options and automated estimating ranges.
Bridges configuration directly with manufacturing floor files.
Key technical risks identified for the configurator implementation and active structural resolutions.
| Technical Risk | Impact | Severity | Mitigation Strategy |
|---|---|---|---|
| Messy or Late 3D Assets | Loads hang, performance drops below 60fps, scale issues | HIGH | Establish clean modelling guidelines in Week 1. Define origins, scale bounds, material merge rules. Build automated scripts to verify poly-count. |
| Scope Creep into CAD Program | Timeline delays, budget overruns, interface complexity | MEDIUM | Draw strict limits on the MVP scope. Keep the tool sales-visualization first. Inspection-level CAD checks are postponed until Phase 3. |
| Mobile Web Performance Issues | Laggy rotation, browser crashes on older phones | MEDIUM | Leverage Draco binary mesh compression, implement Level-of-Detail (LOD) nodes, and force fallback to simple 2D preview modes if canvas crashes. |
| Live Pricing Mismatch Conflict | Legal issues with buyers over misquoted system estimates | LOW | MVP is quote-only. Display a clear legal disclaimer: "All prices are directional estimates; formal quote pricing is finalized by sales advisors." |
Before launching development, review these questions in the client alignment meeting. Check them off as you align, and type down notes. You can export these notes as a text summary.
Determine how many unique trailer shells (e.g. 16ft and 22ft) and how many catalog equipment SKUs must be modeled in 3D for the launch.
Clarify who handles modeling the equipment. Can we use existing SketchUp files, clean them up, or do we need to build some models from scratch?
Confirm whether the builder outputs a dynamic estimated total price to the customer, or remains quote-request only. (MVP recommended: quote only to prevent price conflicts).
Verify where lead data should land. E.g. simple email notifications, HubSpot CRM webhook, or standard databases.
Use this panel to log client feedback during the technical kickoff. Checking the checkboxes indicates alignment is completed on that topic.
When you complete the discussion, click the export button below to save a plain text meeting record. The checklist status and notepad inputs persist locally on browser reloads.
Lead Tech Architect & DevOps Specialist — hi@hammza.com
A seasoned technical lead specializing in high-performance, cost-conscious serverless web deployments. Extensive experience in medical automation frameworks, data protection audits (Swiss & HIPAA), and edge computing solutions (Cloudflare Pages, Workers, D1).