feat: Customizable STL Product Designer (React + TypeScript + Three.js)

[Copilot]

Bootstraps a full React/TypeScript SPA for browsing and customizing 3D-printable STL products with live text overlays — no backend required.

Architecture

• Routing — React Router v6; / catalog, /design/:id customizer
• State — Zustand store (useDesignStore) holds active design + per-field text state; updates propagate live to the 3D scene
• Config-driven designs — src/config/designs.ts exports a typed Design[] array; adding a new product requires only a new entry (STL path, text field positions, defaults)

Key Components

• STLViewer — React Three Fiber canvas; loads binary STL via STLLoader, centers geometry, auto-fits perspective camera to bounding box, OrbitControls (rotate/zoom/pan), drei <Text> meshes for live 3D text
• TextEditorPanel — field selector, text input, font dropdown (6 families), font-size and scale sliders, per-field and global reset
• DesignGrid — live search + category filter over the design catalog

Data Shape

interface Design {
  id: string;
  title: string;
  thumbnail: string;
  category: string;
  stlPath: string;
  textFields: TextFieldConfig[];  // position, rotation, scale, font defaults per field
}

Sample Data

Two placeholder designs (nameplate, keychain) ship with binary STL boxes and SVG thumbnails. Each has two independently configurable text fields.

Extension Points

• Export button stub in DesignCustomizerPage marks where STL generation/backend integration plugs in
• Auth hook point noted in CatalogPage header
• Config-driven architecture means new designs require zero component changes

Original prompt

Build a React (TypeScript) web app for a customizable STL product designer.

Tech stack:

• React + TypeScript
• React Three Fiber (Three.js)
• @react-three/drei for helpers (OrbitControls, etc.)
• Zustand or simple React state for state management

Features:

1. Design Catalog Page

• Display a grid of designs from a local config file (JSON or TS object).
• Each design contains:
  • id
  • title
  • thumbnail
  • category
  • stl file path(s)
  • editable text fields config
• Clicking a design routes to /design/:id.

2. Design Customizer Page

• Load selected design from config.
• Show STL model in a 3D viewer using React Three Fiber.
• Include:
  • OrbitControls (rotate, zoom, pan)
  • basic lighting
  • auto-fit camera to model

3. Editable Text System

• Each design defines multiple editable text fields:

  • key
  • label
  • defaultText
  • position [x, y, z]
  • rotation [x, y, z]
  • scale
  • maxWidth
  • defaultFont
  • defaultFontSize

• UI panel:

  • dropdown to select text field
  • input to edit text
  • font selector (basic list of fonts)
  • sliders/inputs for font size and width/scale

4. 3D Text Rendering

• Render text in the 3D scene using Text from @react-three/drei.
• Position and transform text using config values.
• Update text live when user edits controls.

5. State Management

• Store current design + text values in state.
• Changes should immediately update the 3D preview.

6. Components

• DesignGrid
• DesignCard
• STLViewer
• TextEditorPanel
• AppRouter

7. Project Structure

• /components
• /pages
• /config (design definitions)
• /hooks
• /types

8. Sample Data

• Include at least 2 example designs with:
  • STL file
  • 2 editable text fields each

9. Nice to have

• Search/filter designs
• Reset to default button
• Responsive layout

Notes:

• No backend required (mock everything locally)
• Keep architecture extensible for future export (e.g. generating final STL)
• Add comments where backend or export logic would be integrated later

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.