FloorCraft

Explore café layouts, simulate customer flow, and compare the trade-offs of each change.

Comment

Inspiration

A floor plan shows where furniture fits. I wanted to explore what happens when customers and staff begin moving through it.

FloorCraft turns that question into an interactive café layout experiment. Its intended audience is café owners and operators exploring layout ideas, with architects as a secondary audience for conceptual circulation discussions.

What it does

FloorCraft combines an isometric layout editor with a self-service café simulation.

Users can:

  • Choose between three themed presets with 8, 12, or 16 seats.
  • Move and rotate table-and-chair groups and service stations.
  • Run a fixed scenario with 24 customers, including 18 dine-in requests.
  • Watch customers order, wait for drinks, collect them, then sit or leave.
  • Observe a barista preparing orders and delivering drinks to pickup.
  • Compare completed runs using completion, seating fulfillment, waiting, walking, obstruction, and staff-travel metrics.
  • Inspect production-stage timing and blocked-travel areas through Flow diagnostics.
  • Reopen tested layouts without losing newer working edits.
  • Recover committed layouts and completed results after refreshing.

A separate 12-seat case study provides a controlled A/B experiment: the furniture inventory, seating capacity, demand, and service assumptions stay fixed while only pickup moves.

A reproducible layout trade-off

The bundled A/B experiment produces the following model results:

Metric Layout A Layout B
Seating capacity 12 12
Customer journeys completed 24/24 24/24
Dine-in requests fulfilled 12/18 12/18
Average order → drink ready 314.3s 250.9s
Barista walking distance 240m 96m
Customer movement obstruction 2.0% 3.2%

Layout B reduces staff travel and drink-ready time while increasing customer movement obstruction.

FloorCraft presents those outcomes together rather than declaring one layout an overall winner. Completion and dine-in fulfillment remain visible before supporting time metrics.

These are computed simulation results, not measured improvements at a real café.

How I built it

I used OpenCode and Codex alongside the official Devpost Learn Skill Pack to develop the scope, product requirements, technical specification, implementation, and verification.

The interface uses JavaScript, React, Vite, and React Konva. A separate deterministic simulation engine handles navigation, physical queues, seat reservations, production orders, and staff movement.

The isometric artwork is a presentation layer over the model's physical footprints. Layout validation and simulation geometry remain separate from sprite height and decorative details.

Completed experiments capture their own layouts and results. Diagnostics are derived from those snapshots, keeping evidence attached to the layout that was actually tested.

The application runs in the browser and stores committed layouts and completed comparisons locally. Generated artwork, prompts, asset metadata, and third-party notices are documented in the repository.

Challenges

The main challenge was keeping the visual experience consistent with the simulation.

That included coordinating customer and staff movement, preserving seat reservations, rotating furniture groups without breaking access, and aligning directional sprites with their physical orientation.

Another challenge was presenting comparisons responsibly. Lower waiting time can be misleading when fewer customers finish or fewer dine-in requests are fulfilled. FloorCraft keeps those qualifications visible and distinguishes comparisons with different seating capacities.

Accomplishments

The completed prototype supports the full edit → run → compare → inspect → reload journey.

Verification includes 96 passing unit tests, browser checks covering the core interactions, and a successful production build. A fresh anonymous clone also passed installation, the unit suite, and the build.

The public repository includes the planning documents, an offline app map, reproducible case-study evidence, an MIT license, and third-party notices.

What I learned

My biggest lesson was to define the scope more specifically during the initial discussion with an AI agent, rather than accepting a broad summary.

Clear decisions about behavior, boundaries, and verification helped reduce repeated planning and kept the implementation focused.

The controlled A/B experiment also made the value of precise acceptance criteria clear: keep capacity and demand fixed, change one variable, and inspect the resulting trade-off.

Limitations and next steps

FloorCraft uses illustrative demand and service assumptions. It has not been validated with café owners or calibrated against real operational data, and it does not assess building-code compliance.

The next step is to test whether café operators find the comparisons and diagnostics useful, then investigate calibration before making operational predictions. Floor-plan import remains a later possibility.

Public reference and attribution

The case study draws circulation inspiration from Dwi Liza Handayani and Ivo Ramadhani's 2025 Café Ruang Rasa study, published under CC BY 4.0.

FloorCraft's 10 × 8m A/B layouts are simplified modeling hypotheses, not reproductions of the authors' before-and-after plans.

Built With

Share this project:

Updates

Submission history