Where does my food come from?
An interactive 3D globe that follows fresh food from the farm to your Dutch supermarket shelf, and on to where it ends up if no one buys it.
- Status
- Live
- Role
- Maker
- Stack
- React 19 · TypeScript · Vite · Zustand · MapLibre GL 6
A game-like web app that traces fresh food sold in Dutch supermarkets back to where it was grown. Pick a supermarket, a store and a product, then watch an animated journey by truck, ship and plane. A running tally shows the kilometres, time, CO₂e, fuel, cost and food lost along the way. You can also add products to a weekly basket, compare seasons and see where unsold food goes.
The idea
Food supply chains are invisible. This app makes them visible and playable, and labels every figure by how sure it is: Verified, Likely or Estimated.
What you can do
- Follow a supermarket. Choose one of five Dutch chains (Albert Heijn, Jumbo, Lidl, ALDI, PLUS) and one of 3,051 real store locations, then pick a product from an aisle laid out like a game hotbar.
- Watch the journey. The camera flies from farm to shelf while vehicles travel each leg and the numbers fly into a live tally. The journey can be scrubbed, paused or replayed. It ends with an A–E CO₂e grade, badges, a passport stamp and a suggested lower-carbon swap.
- Follow a product. See one product’s whole network at once: every origin, port and trader, and 23 grocers in six European countries.
- Seasons. A draggable month timeline shows each product’s footprint and origin month by month, with a “play the year” animation.
- Near me. Find your local stores from your device’s location or a postcode. The lookup happens in the browser and nothing is sent anywhere.
- Food waste. See how much is harvested for every kilo sold, what’s lost at each stage, where it goes (food banks, animal feed, biogas, composting, incineration) and how much of the price pays for it.
- After the shelf. Shelf life, what stores do with unsold food, and its route to real Dutch waste plants, with the diesel used and an electric-truck comparison.
- My weekly shop. A basket priced at your store, with total CO₂e, cost, distance and waste, the same basket across the year, and one-click swaps to lower-footprint origins.
Technical highlights
- Stack. React 19, TypeScript, Vite (Rolldown) and Zustand; MapLibre GL 6 in globe projection with satellite imagery.
- Custom WebGL cloud layer. The cloud pattern is generated on the GPU and drawn as two layers that move with parallax, change shape and cast shadows.
- Pure-function animation. The whole journey (camera, vehicles, trails, running totals) is calculated from the time position alone, so it can be scrubbed both ways. Camera flights use the van Wijk–Nuij curve, and globe framing is custom.
- Transparent model. Every figure is computed in code (CO₂e, cost split, fuel, food waste, treatment) from cited sources: DEFRA, GLEC, Poore & Nemecek, FAO and RIVM. A model-check script verifies every product × route × chain combination.
- Light on resources. No backend, store data from OpenStreetMap, location and basket kept on the device, and heavy calculations spread across animation frames so the interface stays smooth.
- Deployment. GitHub Actions to GitHub Pages on a custom domain. MapLibre is split into its own cached file, and link-preview images are included.