TrailKit

What it is

A visual inventory and gear organizer for outdoor activities. You build "loadouts" - gear and clothing combos - in a video-game-style interface, then get clean packing lists to prep for your day out.

Why I built it

This was my first non-work Claude project. I was inspired by the simple but powerful inventory interface in the game ARC Raiders - it was intuitive and attractive, and I thought "how cool would it be if I had this for real-life activities, like mountain biking, climbing, or hiking?" The idea started by dropping a screenshot into Claude, and I iterated over and over until I had a functional system. I learned a huge amount along the way, from interface design to anticipating how a user would flow through the different steps.

In the end, I wanted to make it fun to organize your gear, and to produce really clean packing lists so day-before prep is simple. No one wants to forget something key. I added features like weight and worn gear to push its utility further, and to let myself daydream about getting out there when the weather or my schedule wouldn't.

How it works

TrailKit is a single self-contained HTML file - no backend, no account, no install. You drag gear from a stash into compartments (backpack, water, worn, main), and it tracks weight and capacity live as you build. State lives entirely in localStorage, so it just runs in any browser, and you import or export loadouts as files.

• Drag-and-drop loadouts with a rules engine that enforces type matching, backpack-required, and capacity limits so you can't quietly overpack.
• Six activities out of the box - hike, bike, run, climb, moto, camp - each with its own saved loadout.
• Exports a clean packing list as a standalone HTML file (with its own dark, light, and print modes), plus .trailkit and CSV.
• The source is split into a generic planner engine and the TrailKit domain, bundled down to one file by esbuild.