KitBridge

Inspiration

A school supply drive can have plenty of donations and still run short of complete kits. One group needs crayons, another needs calculators, and both need notebooks. Some kits were promised weeks ago. Counting the boxes doesn't tell a volunteer what they can actually pack, or which purchase would help.

KitBridge answers two questions for the people who pack the kits: how many complete kits can we make right now, and what should we buy next? It's built around SDG 4, and especially target 4.5, equal access to education.

What it does

You enter what's on hand, what goes into each kit, how many kits you've promised each group, and what a restock pack costs. KitBridge gives you a packing plan and a short shopping list, and it updates as you type.

In the example drive, the stock on hand packs 8 kits. One $5 pack of notebooks brings that to 12 of 16. The answer sits at the top of the page, with the supplies that run out first and the one purchase that helps most.

• Promises are hard limits. If you have seven backpacks but promised eight kits, KitBridge names the shortage instead of quietly lowering the promise.
• It only spends when it helps. Drop the budget to $4 and a calculator would fit, but it wouldn't finish a single extra kit, so KitBridge spends nothing.
• Ready for the packing table. Each kit type gets a checklist with exact totals. Pack now from stock, or after the restock arrives. Print it, or export CSV.
• Works on a phone, so the count can happen right in the stockroom.
• Your data stays with you. Drives are saved on your device, and JSON backups let you move them.

How we built it

KitBridge is a React and TypeScript app built with Vite, Tailwind CSS and Radix UI.

The planning is a two-step integer program solved with HiGHS, compiled to WebAssembly and running in a Web Worker so the page never freezes:

1. Find the largest number of complete kits possible within stock, budget and promises.
2. Find the cheapest purchase that reaches that total.

Money is counted in whole cents, so prices never drift. Everything runs in the browser, with no server and no account.

The demo video

We made the demo video with AI and Remotion. The narration, background music and sound effects are AI-generated, and each scene is built in Remotion, a React framework for video, from screenshots of the real app. Clicks, camera moves and word-by-word captions are timed to the narration in code, so the video can be rendered again whenever the app changes.

Challenges we ran into

The cheapest item isn't always the useful one. In the example drive, a calculator costs $4, but notebooks are the bottleneck. A $5 notebook pack adds four kits, and the calculator adds none. A simple "buy the cheapest missing item" rule gets this wrong, which is why we used a real optimizer.

Keeping the plan clear for the person packing was the other challenge. A list that depends on future purchases can easily be mistaken for one you can pack today, so the two views are separate, and an out-of-date result can't be exported as if it were current.

Accomplishments that we're proud of

The whole workflow works in one place: count supplies, set promises, compare plans, and take a checklist to the packing table.

We tested the solver against brute force on 96 small drives, and it matched every time. The test suite also covers shortages, saved drives and exports.

What we learned

A bigger total is only part of the answer. Each group may already have been promised kits, and those promises have to be part of the math.

A number on its own isn't enough, either. Volunteers need to know what to do next, so a named shortage or a one-line shopping list is more useful than a bare count.

What's next

We want to try KitBridge with a real volunteer team and their inventory, check that the purchase suggestions fit how they actually buy supplies, and see whether the printed sheets hold up at a busy packing table.

Try it: https://kitbridge-sigma.vercel.app Source (MIT): https://github.com/Yun-0000/KitBridge

Built With

• highs
• radix-ui
• react
• tailwindcss
• typescript
• vite
• web-workers
• webassembly