From Scratch

Inspiration

Everyone leads a busy life, whether we're focused on school, a career, or our families. It's easy to get caught up in what's right in front of us and forget about the world around us. If I asked you how your favorite T-shirt was made, you might say something simple like, "cotton gets turned into fabric, and the fabric gets made into a shirt." But there's so much more to the story, from growing and harvesting the cotton to spinning, dyeing, manufacturing, and transporting the final product.

What it does

We wanted to make learning about these hidden processes more fun and interactive. Inspired by games like Little Alchemy, From Scratch lets you combine everyday objects and materials to discover what goes into making the things we use every day. Our goal is to spark curiosity about the world around us and teach people about the processes behind things they might normally take for granted.

How we built it

It's a React and TypeScript app that runs entirely in the browser. The entire recipe graph, containing about 1,036 recipes, is bundled into the page as a single import, so once the app loads, you can play it offline.

There are two small serverless functions on Vercel: one explains why a combination did nothing, and the other handles the "learn more" questions. They exist only to keep our Gemini API key secure. We deliberately kept the model away from the recipe list, so the functions receive only two element names and an enum value. The largest request we've sent is just 1,761 bytes, compared to the 514 KB recipe graph.

The art is generated as well. We created 65 base shapes and recolor them into 963 different icons, which let us create nearly a thousand items without having to draw a thousand individual sprites.

Challenges we ran into

The hardest part was the data. The whole premise of the game is that nothing is invented, so every recipe needed a source. With about a thousand recipes, manually checking every citation wasn't realistic. We wrote a validation gate that fetches each citation and checks the page title against the label it appears under. It rejected a surprising number of sources, including duplicate claims and articles that quietly redirected somewhere else.

Accomplishments that we're proud of

There are 1,033 things in the game, and every single one has a citation, with zero unsourced recipes. We're most proud of the failure case, though. Since most combinations are wrong, the game explains why a combination doesn't work instead of simply telling you "nothing happened." That turns being wrong into the part where you learn something, rather than the part where you get stuck.

What we learned

The part we didn't expect was how much we learned just by building it. Every single combination had to be checked against a source before it could ship, so we ended up learning a lot of things we never would have looked up otherwise. We didn't know that soap can be broken back down into salt and water, or that you need steel before you can make paper, and none of us did until we opened the source and read it.

We also learned a lot about UI from trying to make all of this information feel fun instead of overwhelming. We wanted the game to feel like a game first, so we had to figure out how to show recipes, explanations, animations, and all the little details without cluttering the screen.

What's next for From Scratch

Challenges are next, like finding every part needed to play football or build a rocket, using the graph that is already there. Local records too, like fewest attempts to reach a target or best hit rate. The stats panel already counts those, so it wouldn't need a server.

We'd also like to get more of the footprint figures hand-read. Only eight recipes have one right now, and the rest say zero rather than guess. Doing one full chain properly would let us show the embodied water and carbon of a T-shirt from the soil upward.