---
title: "Zunoy Bug Tracker — case study by Srikanth V"
description: "Collaborated with the Zunoy team on the Bug Tracker — a kanban-style bug dashboard plus an embeddable bug-reporting widget that captures a screenshot, lets users annotate it, and files the report automatically."
url: "https://iamsrikanth.com/projects/zunoy-bug-tracker"
role: "Senior Frontend Engineer"
stack: "Next.js, dnd-kit, Vite, html2canvas, Shadow DOM"
live: "https://zunoy.com"
updated: "2026-07-16"
---

# Zunoy Bug Tracker

> Collaborated with the Zunoy team on the Bug Tracker — a kanban-style bug dashboard plus an embeddable bug-reporting widget that captures a screenshot, lets users annotate it, and files the report automatically.

- Role: Senior Frontend Engineer
- Stack: Next.js, dnd-kit, Vite, html2canvas, Shadow DOM
- Live site: https://zunoy.com
- Built by: Srikanth V (https://iamsrikanth.com/)

## Dashboard
A kanban-style bug board built with dnd-kit for drag-and-drop status changes, backed by a data table (TanStack Table) and an activity heatmap for tracking report volume over time. Includes an embedded PDF viewer and syntax-highlighted stack traces for triage.

## Embeddable widget
A drop-in `<script>` tag or npm package that adds a floating "Report Bug" button to any site:

- **Automatic screenshot capture** on report (html2canvas), excluding the widget's own UI.
- **In-browser annotation** — draw, highlight, and label directly on the captured screenshot using Zunoy's own canvas annotation package.
- **Full CSS isolation** via Shadow DOM, so the widget never leaks styles into or out of the host page.
- Zero-config auto-init from data attributes, multipart upload of the screenshot + metadata to the tracker API.

## My part
Worked as part of the team on the frontend, coordinating with teammates rather than building it solo.

## Outcome
Lets any team — internal or a customer's site — capture and file an annotated bug report in a couple of clicks, with the report landing directly in the same kanban dashboard.