BridgeForge

Build bridges, break bridges, actually learn why they broke

Comment

Inspiration

Physics class always tells you triangles are strong and compression is different from tension, but nobody ever lets you actually break something to prove it. We wanted a bridge game where the physics isn't fake. Not a hidden dice roll pretending to be engineering, an actual solver like the ones real structural engineers use. The Mastery Mentors Hackathon theme was STEM/AI for learning, and "what if failing a bridge actually taught you something" felt like the most honest way to do that.

What it does

BridgeForge is a browser truss bridge builder. You drop joints, drag beams between them, pick wood, steel, or cable, and then hit Test. A truck drives across your bridge while the game runs a real direct stiffness method solve at every step, the same matrix math actual civil engineers use, and colors every beam live by how stressed it is. Red for tension, blue for compression. Overload a beam and it snaps, and if your shape wasn't triangulated in the first place the game tells you it's a mechanism instead of just glitching out.

There are 5 campaign levels with different terrain (creek, river, canyon, gorge, highway overpass), a budget you have to stay under, star ratings for efficiency, a predict-before-you-test mechanic, checkpoint quizzes, unlockable real bridge history (Tacoma Narrows, the Quebec Bridge collapse, Silver Bridge, stuff like that), and a full 12 chapter course that walks through the actual physics from "what is a force" all the way up to the exact steps the solver runs. There's also a lab report export so a teacher could actually assign this.

How we built it

React, TypeScript, and Vite, everything rendered in plain SVG so we could color and animate every beam individually. No physics engine, because a truss isn't rigid body physics, it's a linear system. We built the solver ourselves: assemble a global stiffness matrix from every member's length, angle, and material, apply the supports as boundary conditions, solve for displacements, then back out each member's actual force. Positive is tension, negative is compression, and that number is literally what decides the color you see.

We got the solver right first and checked it against hand solvable textbook trusses before touching any UI, because if the physics is wrong none of the rest matters. Then we built the builder, wired the solver to it, added the truck crossing animation, and stacked the campaign and education content on top once the core loop actually worked.

Challenges we ran into

The solver had to catch its own failure cases instead of just crashing. If someone builds an untriangulated shape, the stiffness matrix comes out singular, and we had to detect that and show "structure unstable" instead of returning garbage numbers.

We also found out the hard way that just because a level has a big budget doesn't mean a bridge that fits under it actually exists. We had to go back and literally run our own solver against every level to prove a real, buildable, passing bridge existed under budget with room to spare, because a level judges can't beat on a demo is worse than no level at all. Turned up an actual bug where our own reference bridge generator was building a road beam and literally run our own solver against every level to prove a real, buildable, passing bridge existed under budget with room to spare, because a level judges can't beat on a demo is worse than no level at all. Turned up an actual bug where our own reference bridge generator was building a road beam longer than the truck was allowed to cross. Would've been embarrassing to have someone click our own demo helper and watch it be broken in the same game where we're trying to teach kids what a solvable structure looks like.

Accomplishments that we're proud of

The physics is genuinely real, not a lookup table wearing a bridge costume. We can explain the actual matrix math to a judge and mean it. We're also proud of the course. It would've been way easier to slap six vague paragraphs about triangles and call it educational content, but we wrote twelve real chapters with fact checked history in them, like the actual difference between a Pratt truss and a Howe truss being which way the diagonal leans, and got the Tacoma Narrows story right (it was aeroelastic flutter, not simple resonance, which is a myth that gets repeated constantly).

What we learned

Real engineering constraints make way better game design than fake ones. The reason cable snapping in compression teaches something is because that's literally what a rope does, we didn't have to invent a rule for it. We also learned that "it looks like it works" and "it provably works" are different things, and the second one takes actually running your own solver against your own levels instead of trusting that the numbers looked reasonable when you picked them.

What's next for BridgeForge

Self weight as its own load, not just the truck. A level editor so people can build their own gaps and share them. Wind load or a genuinely dynamic crossing instead of quasi-static steps. Mobile touch support, since right now it's mouse only. And honestly, more checkpoint quizzes, because the ones we have are the closest thing in the whole project to something a teacher could actually grade.

Instructions for running or accessing the project

Easiest way: just go to the live site, no install needed.

https://bridgeforge.vercel.app

If you want to run it locally instead:

  1. Clone the repo: git clone https://github.com/calloolooh-ai/bridgeforge.git
  2. cd bridgeforge
  3. npm install
  4. npm run dev, then open the localhost link it prints
  5. npm test if you want to see the solver unit tests pass (checked against hand solved textbook trusses)
  6. npm run build for a production build

No backend, no API keys, no database, no account needed. Everything, including the physics solver, runs entirely in your browser. Click "Start the Course" on the landing page if you want the full 12 chapter explanation first, or "Jump into the Campaign" if you'd rather just start breaking bridges and learn as you go.

How the project relates to education

BridgeForge is built around one specific idea, that letting someone fail at something and immediately see why is a way better teacher than a slide with a definition on it. Every core statics concept a physics or intro engineering class covers shows up here as something you can actually do instead of just read: tension and compression are literally the two colors every beam turns, buckling is the reason a long thin beam gives out before a short fat one does, triangulation is why your bridge folds if you forget a diagonal, and factor of safety is a real number the game reports back to you after every run.

We didn't want to just claim it was educational, so we built in actual teaching techniques instead of only vibes. There's a predict before you test mechanic, which is a real technique from physics education research (predict, observe, explain), where you guess which beam fails before you find out. There are checkpoint quizzes tied to whatever concept a level just taught. There's a full 12 chapter course that starts at "what is a force" and ends with the exact eight steps our own solver runs, so a curious student can go as deep as they want. And beating a level unlocks real bridge history, like Tacoma Narrows or the Quebec Bridge collapse, tied back to the concept that failure demonstrates.

We're being upfront that this is a hands on lab and demonstration tool, not a full replacement for a curriculum with lesson plans. But there's also a lab report export that turns any result into a printable pass or fail summary with cost and stress data, specifically so a teacher could actually assign "cross this gorge under budget" as real classwork and have something to grade at the end of it.

Built With

Share this project:

Updates