React-Finity

A browser-based parametric 3D modeling application for the Gridfinity modular storage system. Define storage components through parameters, attach modifiers, preview in real-time 3D, and export print-ready models.

Features

• Parametric baseplate generation -- configurable grid size with socket profiles, magnet holes, screw holes, and slim mode
• Bin/container generation -- configurable width, depth, and height with corner fillets, stacking lip, hollow interior, magnet holes, weight holes, and honeycomb base
• Modifier system -- composable modifiers that attach to bins:
  • Divider Grid -- internal divider walls with configurable count and thickness
  • Label Tab -- angled label surface on any wall face
  • Scoop -- curved cutout for easy part access
  • Insert -- open-top compartment grid with rim and internal walls
  • Lid -- flat or stacking lid variant
  • Finger Scoop -- U-shaped notch in wall top for easy finger access (subtractive)
• Print Layout view -- dedicated view with virtual print bed, automatic FDM-optimal orientation, and row-based object arrangement
• STL export -- binary STL export of individual objects, all objects as ZIP, or merged plate STL
• Export settings -- configurable export scale (0.1x-10x) and polygon quality (Low/Medium/High)
• Project management -- save, load, rename, and delete projects with auto-save (2s debounce) and Ctrl+S
• Local storage persistence -- projects saved as JSON to browser localStorage, auto-loaded on startup
• Print bed presets -- configurable bed sizes (220x220, 256x256, 350x350mm) with spacing control
• Real-time 3D viewport -- orbit camera, transform gizmo, grid snapping, measurement overlay
• Camera presets -- top, front, side, and isometric views
• Dimension profiles -- Official, Tight Fit, and Loose Fit presets for all Gridfinity dimensions
• Undo/redo -- snapshot-based history with Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y and toolbar buttons
• Multi-object selection -- shift/ctrl/meta-click to select multiple objects, bulk delete, selection count display
• Copy/paste/duplicate -- Ctrl+D duplicates objects with all modifiers, Ctrl+C/Ctrl+V for internal clipboard
• Drag reordering -- drag-to-reorder objects in the list and modifiers within a bin
• Viewport display modes -- wireframe toggle, transparency mode, section view with adjustable clipping plane, color-coded modifier meshes
• Keyboard shortcuts -- Delete/Backspace to remove, Escape to deselect, Ctrl+Z/Y undo/redo, Ctrl+D duplicate, Ctrl+C/V copy/paste, Ctrl+P for print layout, Ctrl+Shift+E to export, Ctrl+S to save
• Mobile-responsive layout -- panels slide in as overlay sheets on small screens, toolbar collapses secondary actions into overflow menu, touch-friendly button sizes

Tech Stack

• React 19 + TypeScript
• Vite for bundling and dev server
• React Three Fiber for 3D rendering
• Zustand for state management
• Tailwind CSS v4 + shadcn/ui for the interface
• Vitest for unit tests
• Playwright for end-to-end tests

Getting Started

Prerequisites

• Node.js (v18 or later)
• npm

Installation

git clone https://github.com/tyevco/react-finity.git
cd react-finity
npm install

Development

npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build

Lint & Format

npm run lint
npm run format

Testing

# Unit tests
npm run test

# Unit tests in watch mode
npm run test:watch

# End-to-end tests (requires Playwright browsers)
npx playwright install chromium
npm run test:e2e

Project Structure

src/
  app/                    App entry point & layout
  components/
    panels/               Left (object list) & right (properties) panels
      modifiers/          Per-modifier control components
    viewport/             3D viewport (React Three Fiber canvas)
    toolbar/              Top toolbar
    ui/                   shadcn/ui primitives
  engine/
    geometry/             Parametric geometry generators
      modifiers/          Modifier geometry generators
    export/               Export & print layout utilities
    constants.ts          Dimension profiles & default params
    snapping.ts           Grid snapping logic
  hooks/                  Custom React hooks
  store/                  Zustand stores
  types/                  TypeScript interfaces
  lib/                    Utility functions
e2e/                      Playwright end-to-end tests

Roadmap

See ROADMAP.md for the full development plan. Current status:

• Phase 1: Foundation & App Shell -- Complete
• Phase 2: Bin Generation & Core Features -- Complete
• Phase 3: Interactivity & Manipulation -- Complete
• Phase 4: Modifier System & Advanced Geometry -- Complete
• Phase 5: Export & Print Layout -- Complete
• Phase 6: Polish & Advanced UX -- Complete
• Phase 7: Extensible Framework -- Complete
• Phase 8: Desktop App (Tauri) -- Planned

Contributing

Contributions are welcome. Please open an issue to discuss proposed changes before submitting a pull request.

License

This project is licensed under the MIT License. See LICENSE for details.