Solving the "Desk Setup Math" Nightmare: From Visual Planner to Instant Checkout 🛒🔌

Solving the "Desk Setup Math": Adding contextual monetization to my Flutter Web app 🔌

A few weeks ago, I shared DeskFlow here — a visual desk setup planner I built with Flutter Web. The response was awesome, and it validated that I wasn't the only one who hated figuring out if a specific dock could daisy-chain two 4K monitors.

If you missed it, here's the previous post:
I built a desk setup cable planner with Flutter Web — here's what I learned

The app did its core job well: drag equipment onto the canvas, connect the ports, validate the physical connections, and auto-generate a "Shopping List".

But as I started using it for my own actual desk upgrade, I realized I left a massive UX gap.

---

🛑 The UX Flaw: The "Setup Math" Nightmare

Generating a list that says Requires: 2x DP Cables, 1x Thunderbolt 4 Cable is helpful, but it doesn't close the loop. Whenever you upgrade a workspace, you have to do the mental "Setup Math":

• 🤔 "Okay, I have one DP cable in my drawer. I need one more."
• 📦 "Wait, does this new USB-C hub come with a host cable, or do I need to buy one?"
• ⚠️ "If I search 'Thunderbolt 4 cable' on Amazon, half of them are cheap knockoffs that only support 20Gbps. Which one actually works?"

Keeping track of what you own, what you need to buy, and finding the exact product that matches the required specs was still a massive headache.

---

💡 The Solution: From Diagram to Cart

I just pushed a new update to fix this. Now, the auto-generated shopping list doesn't just give you generic cable names—it provides a direct 'Buy' button.

These buttons link directly to verified, high-quality cables (like Cable Matters or Belkin) that perfectly match your setup's bandwidth and power requirements.

You can plan your setup visually, check your physical drawer for what you already own, and instantly buy the missing, compatible pieces with one click. No more guessing.

---

💸 Transparent Monetization (The Elephant in the Room)

I want to be 100% transparent with the DEV community: These are Amazon Affiliate links. As an indie hacker, figuring out how to monetize a free, purely client-side SPA (Single Page Application) is tough. I absolutely hate plastering banner ads over a clean UI, and putting core features behind a paywall ruins the utility.

Placing affiliate links on the exact missing pieces the user already needs to buy felt like the ultimate win-win:

1. For the User: Saves 20 minutes of searching Amazon and prevents buying the wrong, incompatible cable. Costs them nothing extra.
2. For Me: Generates a small commission to help keep the Vercel/Supabase backend running.

🛠 Under the Hood

Technically, it was a very simple addition. In my Supabase DB, I mapped my existing cable_type to a new affiliate_url column. The Flutter UI simply binds the URL to the 'Buy' button if it exists.

dart
// Fetching the verified cable link from Supabase
final cableData = await supabase
    .from('cables')
    .select('name, price, affiliate_url')
    .eq('type', _normalizeCableType(portType))
    .single();

// Rendering the button
if (cableData['affiliate_url'] != null) ...[
  ElevatedButton(
    onPressed: () => launchUrlString(cableData['affiliate_url']),
    child: Text('Buy on Amazon'),
  )
]