Hey everyone 👋

// Detect dark theme var iframe = document.getElementById('tweet-2114729698127454239-901'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2114729698127454239&theme=dark" }

Play with it here → mahmad.me/blocks/interactive/api-lifecycle

It started with one line

Anatomy is a Claude skill that explains an idea by building a small machine instead of a diagram. I gave it this:

"/anatomy explain how an API lifecycle works with database and cache, interactive"

The first version already worked: it was a full bench with a shuttle running on a rail. The fun part was the back and forth after that.

Every part means something 🔧

There are no boxes and arrows. Each piece of the machine is a real part of the request:

  • 💳 The card is the request. It rides on a little shuttle with wheels that actually roll.
  • 🚧 The gate is auth. It only lifts when the token is valid.
  • 🗄️ The drawers are the database. A drawer slides out to fetch the row.
  • 💾 The floppy slot on the monitor is where the response lands before it shows on screen.

Click the monitor and it zooms in so you can read the profile.

What I changed after the first version

  • The cache keeps its copy. At first the cache handed its only copy to the shuttle. That's wrong: a cache read doesn't remove anything, so now it makes a copy.
  • No clicking mid-flight. Flushing the cache while a request was on its way caused weird results, so the controls lock until the trip finishes.
  • Realism. I moved the floppy slot to the front of the monitor, gave the shuttle rolling wheels, and made the card slide into the slot in one smooth hop.
  • Zoom controls (+ / − / reset) inside the frame, so you can get close to any station.

Play with it in your favorite AI tool 🤖

Every block on my site has an Open in menu: v0, ChatGPT, Claude or Cursor. It sends the full source along, so you can ask how it works, change it, or build your own machine from it.

Or add it straight to your project:

npx shadcn add https://mahmad.me/r/api-lifecycle.json

Source code

The block and everything else on my site are open source.

If you like it, please give the repo a star ⭐ → github.com/MA-Ahmad/myPortfolio.
It really helps!