DEV Community: Billal Hossain

I launched PinReview on Product Hunt: click any element, get a bug ticket

Billal Hossain — Mon, 19 Oct 2026 07:19:36 +0000

PinReview is live on Product Hunt today! 🚀

If you build sites for clients, you know this email: "the button on the contact page looks weird." Which
button? Which browser? What does "weird" mean?

I got tired of guessing, so I built PinReview. A reviewer clicks any element on a live site and leaves a
comment, and it becomes a task with:

📸 An annotated screenshot
🎯 The exact CSS selector
🧰 URL, browser, viewport and console errors

Everything lands on a Kanban board. Clients leave feedback for free, with no login and no seat.

For devs: on paid plans, Claude Code and Cursor can work with the board directly over MCP, so your AI agent
gets the full context of a bug without any copy-pasting.

Built with Next.js 16, Express + Prisma, and a Chrome/Firefox extension made from one codebase.

🎁 40% off any paid plan for the launch. The code is in the popup on pinreview.one. There's also a
free-forever plan.

👉 Support the launch on Product Hunt: https://www.producthunt.com/products/pinreview

I'd love your feedback in the comments! 🙌

How I keep feedback pins on the right element when a website changes

Billal Hossain — Sun, 11 Oct 2026 05:15:29 +0000

When I built PinReview, a tool that lets clients click anywhere on a website and leave feedback, I thought the hard part would be screenshots. It wasn't. The hard part was making a pin
still point at the right element after the page changes.

A client pins a comment on a button. The next day a developer adds a banner above it, or opens the page on a phone instead of a laptop. Where should the pin go now?

## Coordinates don't work

My first idea was to save the click position (x, y). It breaks immediately: different screen sizes, scrolling, responsive layouts and any content added above the element all move it.

So instead of saving where the click happened, I save what was clicked.

## A ranked list of selectors

When someone pins an element, I build a list of CSS selectors, from most stable to least stable:

  function buildSelectorChain(el) {
    const chain = [];
    if (el.id && isStableId(el.id)) chain.push(`#${CSS.escape(el.id)}`);
    for (const attr of ["data-testid", "data-test", "data-cy", "name", "aria-label"]) {
      const v = el.getAttribute(attr);
      if (v) { chain.push(`${el.tagName.toLowerCase()}[${attr}="${v}"]`); break; }
    }
    const classes = [...el.classList].filter((c) => !/^(css-|sc-|jsx-|hover|active|focus)/.test(c));
    if (classes.length) chain.push(`${el.tagName.toLowerCase()}.${classes.join(".")}`);
    chain.push(nthChildPath(el)); // always present, last resort
    return chain;
  }

A few details turned out to matter:

Auto-generated IDs are a trap. IDs like :r1a: (React), UUIDs or ember123 change on every build, so isStableId rejects anything that looks generated.
CSS-in-JS class names are noise. css-1x2y3z or sc-abc123 change between deploys, so they're filtered out.
Test attributes are gold. data-testid rarely changes, which makes it the best anchor after a real ID.

To find the element later, I try each selector in order and take the first one that matches exactly one element:

  function resolveSelectorChain(chain) {
    for (const sel of chain) {
      const matches = document.querySelectorAll(sel);
      if (matches.length === 1) return matches[0];
    }
    return null;
  }

## Position relative to the element

The pin's position is stored as a percentage of the element's size, not of the page. A pin at 30% across a button stays at 30% across that button, whether the button is 200px wide on
desktop or 120px on mobile.

## Keep the original evidence

Every comment also stores a screenshot of what the reviewer actually saw, with the pin drawn on it, plus the page URL, viewport size, browser, OS and console errors. Even if the live page
changes completely, the developer can always see the original context.

## Where it still breaks

The honest part: lists of identical items. Imagine three product cards with the same classes and no IDs. They fall back to the DOM-position selector, so if a new card is inserted above,
the pin moves to the wrong card, and nothing warns you.

Today the fix is simple: give repeated items a unique id or data-testid. I'm also looking at storing a small fingerprint of the element (its text and tag) so a pin can say "this may
have moved" instead of confidently pointing at the wrong thing.

## Try it

You can try PinReview live, no sign-up needed: https://pinreview.one/demo

I'm launching on Product Hunt on October 19: https://www.producthunt.com/products/pinreview-2

How would you handle the identical-cards case? I'd love to hear other approaches.

From Website Feedback to Code Fixes: Using PinReview With Claude Code

Billal Hossain — Sat, 10 Oct 2026 06:23:14 +0000

Collecting website feedback is one thing. Actually fixing the reported issues is another.

Imagine you're working on a client's website. They report several issues: a button is misaligned, a section has incorrect spacing, and a component doesn't look right on mobile.

Traditionally, you would review the screenshots, understand each issue, locate the relevant code, and start fixing everything manually.

But what if you could make that workflow more efficient with AI coding tools?

My workflow idea: PinReview + Claude Code

I've been building PinReview, a visual website feedback tool that helps developers collect feedback directly on websites and organize it into actionable tasks.

Here's how this workflow can work:

Collect visual feedback

Clients or teammates leave comments on specific areas of a website using PinReview. Each comment can include a screenshot and useful technical context, such as the CSS selector, browser, viewport, and console errors.

Export the tasks

Once the feedback is collected, developers can export tasks and use that information as context for their coding workflow.

Bring the feedback into Claude Code

Instead of manually explaining every visual issue, you can provide the exported task details to Claude Code. It can help investigate the relevant components, identify potential causes, and propose code changes.

Review and verify the fixes

AI-generated changes still need developer review. Run the application, check the affected page, and verify that the original issue has actually been resolved.

Why this workflow interests me

Tools like Claude Code can help developers work directly with their codebase, while PinReview helps capture the visual problems that need to be solved.

Together, this creates a practical workflow:

Visual feedback → Exported tasks → AI-assisted coding → Developer review → Verified fixes

The goal isn't to replace developers. It's to reduce the time spent understanding scattered feedback and help developers focus on solving the actual problems.

I'm building PinReview for developers, freelancers, designers, and agencies who want a better way to manage website feedback.

🔗 Check out PinReview: https://pinreview.one

I'd love to hear your thoughts

If you're using Claude Code or another AI coding assistant, how do you currently pass UI bugs and visual feedback into your coding workflow?

Would exporting structured feedback from a tool like PinReview be useful to you?

#webdev #ai #claudecode #productivity

The Problem With Website Feedback (And How I'm Trying to Fix It)

Billal Hossain — Fri, 09 Oct 2026 16:32:57 +0000

As developers, we spend a lot of time building websites, fixing bugs, and improving user experiences. But one thing that can make the process unnecessarily difficult is collecting feedback from clients.

You might receive messages like:

“The button doesn't look right.”
“Please fix the section below the header.”
“The layout looks broken on mobile.”
“Can you move this element a little to the left?”

Sounds familiar? 😅

The problem is that written feedback often lacks context. You end up asking follow-up questions, searching for the relevant section, and trying to reproduce the issue. This creates unnecessary back-and-forth between developers, designers, and clients.

What if feedback could be visual?

Imagine opening a website, clicking on the exact element that needs attention, and leaving a comment right there. The feedback would include a screenshot and relevant technical details, making it easier to understand the issue.

That's the idea behind PinReview.

I built PinReview to help developers, designers, freelancers, and agencies collect visual website feedback and turn it into actionable tasks.

With PinReview, you can:

📌 Pin comments directly onto website elements.
📸 Capture screenshots and technical context.
✅ Manage feedback through a Kanban board.
🌐 Collect feedback using a browser extension or embeddable widget.
👥 Allow guests to leave comments without creating an account.

The goal is simple: reduce communication overhead and make website reviews easier for everyone involved.

I'm still working on growing PinReview and learning from real users, so feedback and suggestions are always welcome.

🔗 Try PinReview: https://pinreview.one

Let's discuss

How do you currently collect website feedback from clients?

Do you use screenshots, Google Docs, project management tools, or something else? I'd love to learn how other developers handle this workflow.

How I’m Making Website Feedback Easier for Developers and Agencies

Billal Hossain — Fri, 09 Oct 2026 16:31:08 +0000

Have you ever received website feedback like “this section looks wrong” without knowing which section the client was talking about?

I built PinReview to solve this problem.

PinReview helps developers, designers, and agencies collect visual feedback directly on websites. Instead of going back and forth through emails and screenshots, users can pin comments to specific areas of a page and turn feedback into actionable tasks.

What you can do with PinReview:

📌 Leave pin-point comments directly on websites.
📸 Capture screenshots and contextual technical details.
✅ Organize feedback using a Kanban task board.
🌐 Collect feedback through an embeddable widget or browser extension.
👥 Let guests leave comments without creating an account.
🖼️ Review uploaded PDFs and images, too.

I built PinReview to make website reviews simpler and help teams spend less time clarifying feedback and more time fixing issues.

If you're a freelance developer, designer, or agency working with clients, I'd love to hear your thoughts!

🔗 Website: https://pinreview.one

🎥 Promotional video: https://www.youtube.com/watch?v=N_SnhYFGCpA

What tools do you currently use to collect website feedback from clients?