17squares

Optimize your backpack for a weeks worth of outfits 🦦

Comment

Inspiration

  • We're broke students who flew to CalHacks on budget airlines and couldn't afford carry-on fees.
  • A personal item is free, but fitting a five-day trip into one backpack takes a lot of trial and error.

What it does

  • Takes photos of your bag and the things you want to pack.
  • Measures every item, including how soft, fragile and quick-to-reach it is.
  • Tries many packing strategies and picks the one that uses the least space.
  • Shows an interactive 3D view of what goes where, with step-by-step instructions.
  • Tells you how to fold or roll each piece of clothing.

How we built it

Step 1: measuring (Python, Claude, Apify, OpenCV)

  • Hard items:
    • Photographed next to a business card for scale.
    • OpenCV recovers the card's 3D position, cuts out each object, and fits a box to get its width, height and depth.
  • Clothes: Claude flags products worth looking up (e.g. laptop, tablet), Apify fetches spec pages. Corroborating evidence between measurements and specs helps the algorithm measure other, unknown items (e.g. pouches)
  • Bag:
    • Claude recognizes the model, and Apify looks up the manufacturer's capacity.
    • We check the answer against the bag's silhouette in the photo.
  • Trust:
    • Claude sees and names, and code does all the measuring and bounds every number.
    • Claude checks a fitted box drawn on each photo, and corrections that break a shape rule are refused.
  • Process:
    • Implemented over six iterations with Claude, documented each finding and scored against hand-measured ground truth.
    • Each iteration made bets that we measured and kept or reverted.

Step 2: packing (Python, NumPy)

  • Tried 51 packing algorithms, based on different heuristics.
  • Rule based algorithms combine choices about item order, candidate placement locations, how to score placements, and rotation or prepared folds to try. Strategies include greedy and best-fit placement, layers, walls, columns, and voxel grids
  • Search-based algorithms (genetic, simulated annealing, tabu) try many item orders and rotations and keep improving the best one, using a rule-based placer to turn each order into a layout.
  • Geometry checks for bag bounds, collisions, support, and insertion paths. Valid full-fit layouts are ranked by selected form volume, then compactness and other quality measures.
  • Ran 6,480 tests on synthetic bags and items, with held-out cases to pick the most effective algorithm.
  • The best algorithms run in parallel, and the lowest-volume layout wins.
  • A 5 s cap and a fast profile cut a run from 40 s to 11 s.

Step 3: app (React, Next.js, TypeScript, Tailwind, Three.js, Figma)

  • A mobile web app that walks you through the photos, the 3D plan, and loading the bag.
  • Flow was Prototyped in Figma using the Figma AI agent and Figma Make to connect screens.
  • Visualized the packing plan in an interactive Three.js model with animated rotation, item selection, and placement guidance.
  • Turned the plan into step-by-step packing instructions, with illustrated folding and rolling guides based on popular strategies.

Challenges we ran into

  • 3D from a 2D photo: a photo only gives true size on the card's plane, so we recovered depth from the card's pose, camera angle, looked up measurements of known items (e.g. laptop models), and shape assumptions (flat vs. boxy)
  • Counting and fabric: look-alike garments get merged, and a folded sweater takes far more space than a tee.
  • Ranking a packing: A layout can fit more items, keep important items accessible, protect fragile items, or use less space, and these goals can conflict.
  • Instructions in 3D: explaining where each item goes, and in what order, clearly on a phone.
  • Search time: Some packing searches take too long on difficult cases, so we added time limits and a faster algorithm profile.

Accomplishments that we're proud of

  • Letting the packer choose a fold or roll for each item took full-fit rates from about 2% to about 39% on our benchmark.
  • Soft, shapeless clothes are measured and packed as folded or rolled shapes, not as boxes.
  • Our demo packs 16 of 16 items into a 22 L backpack, with a 3D guide to follow.
  • Interactive 3D visualization

What we learned

  • Claude is best at seeing and naming and weak at precise numbers, so the best pattern was Claude proposing and code deciding.
  • A single phone photo can't give 100% precise dimensions because of camera distortion such as focal length, angle, depth and similar colours.

What's next for 17squares

  • Cache detected items so repeat runs with the same item skip Claude and Apify calls. User inventory may rarely change (e.g. same bag, laptop)
  • Let users edit detected items and choose priority items
  • suggest items to remove when something doesn't fit.
  • suggest additional items depending on the type of trip when there is extra space
  • Account for trip type (flights need liquids and electronics within reach), fragility and pockets.
  • Let users enter bag dimensions.
  • Improve insertion order.
  • More item types (bottles, shoes, underwear).
  • Preserve item shapes for non rectangular prism/cylindrical items
  • “Best packing” depends on the user’s priorities, allowing the user to choose which tradeoffs to make

Built With

Share this project:

Updates

Submission history