DEV Community

rocketsquirreldev
rocketsquirreldev

Posted on

"How My First User Request Uncovered a Hilarious Structural Bug"

#webdev #flutter #productivity #indiedev

I recently launched DeskFlow, a visual desk setup simulator. Just a few days in, I received my very first user request to add a new piece of equipment!

The user requested the Kuycon P27D 4K 27" 144Hz monitor. They even took the time to manually configure the ports in the app before submitting (3 USB-C, 1 HDMI, 1 DP). It was an incredibly proud moment for me as a solo dev.

Verifying the Specs

Before pushing it to production, I checked the official Kuycon website to verify the ports. The user did a great job, but there were some slight differences compared to the official specs:

  • USB-C: User put 3 -> Actually 2 (one 100W PD, one standard)
  • HDMI: User put 1 -> Actually 2 (HDMI 2.1)
  • DP: User put 1 -> Actually 1 (Spot on!)
  • Missing: AC power and a 3.5mm audio jack.

I corrected the data based on the official specs and inserted it directly into my Supabase database.

The Mystery of the Missing Monitor

I ran the SQL, saw the row in Supabase, and confidently hard-refreshed my app (Cmd+Shift+R).

But the monitor wasn't showing up in the "Monitors" tab.

At first, I blamed caching. I refreshed again and again, but the Kuycon P27D was nowhere to be found.

The Root Cause: Hardcoded Guesswork

I dug into the code and found the culprit: the equipmentCategory() function. This function decides which tab an item belongs in.

To my horror, it was completely ignoring the category column in my Supabase DB. Instead, it was doing this:

String equipmentCategory(Equipment e) {
  final n = e.name.toLowerCase();
  if (n.contains('monitor') || n.contains('display') || n.contains('odyssey')) {
    return 'Monitors';
  }
  // ...
}
Enter fullscreen mode Exit fullscreen mode

My app was literally guessing the category by reading the product's name! Previous items happened to have words like "Monitor", "Display", or "Odyssey" in their names, so they accidentally worked fine.

But "Kuycon P27D" didn't trigger any of those keywords, so the app unceremoniously dumped it into the "Others" tab.

Worse yet, I realized my Equipment data model didn't even have a category field. The app wasn't even attempting to fetch it from the database.

The Fix

I fixed two things immediately:

  1. Added the category field to the model so it actually reads from the DB. 
class Equipment {
  final String? category;  // Finally here!
  // ...
}

factory Equipment.fromJson(Map<String, dynamic> json) {
  return Equipment(
    category: json['category'] as String?, 
    // ...
  );
}
Enter fullscreen mode Exit fullscreen mode
  1. Updated the logic to prioritize the database value, using a mapping table to convert DB values to UI tab names. The old name-guessing logic is now just a fallback. 
const _dbCategoryMap = {
  'monitor': 'Monitors',
  'laptop':  'Laptops',
  // ...
};

String equipmentCategory(Equipment e) {
  if (e.category != null && e.category!.isNotEmpty) {
    return _dbCategoryMap[e.category!.toLowerCase()] ?? 'Others';
  }
  // Fallback to name guessing
  final n = e.name.toLowerCase();
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Lesson Learned

If it weren't for this specific user requesting a monitor without the word "monitor" in its name, this bug could have stayed hidden for months.

Thanks to my very first user, a core structural flaw was caught and fixed. DeskFlow v1.1.1 is now live, and equipment sorting is finally deterministic!

Huge shoutout to whoever requested the Kuycon P27D 🙏

Plz try! and give me your feedback!
--> https://deskflow-gold.vercel.app/

Top comments (0)