Bug Tracker

Bug reports scattered across chats and spreadsheets get lost: nobody knows who owns an issue, what state it is in, or whether the fix was checked. Bug Tracker gives a QA and developer team one shared workspace with a clear, enforced workflow - QA reports and verifies, developers take and fix - with screenshots, comments, an activity history and notifications, so every bug has an owner and a status.

• Give every bug an owner and a single source of truth for its status.
• Enforce a real workflow: Open → Assigned → In Progress → Review → Closed, with QA able to reject a fix back to Open.
• Show each role only what it can do: QA creates, edits, assigns, closes and reopens; developers take, start and submit for review.
• Keep a permanent record: an activity timeline and comments on every bug, plus notifications when work is assigned or ready for review.

• JWT login with two roles, QA and Developer, and a protected workspace for each.
• Status workflow: developers take open bugs, start work and send them to review; QA closes them or reopens them as rejected.
• Bug reporting (QA): name, description, affected URL, bug or new-feature type, developer assignment and a screenshot upload (JPG, PNG or WEBP up to 5 MB).
• Bug register: issue cards with status filter buttons and live counts, a fix-type filter and pagination.
• Bug detail page: description, screenshot with full-size preview, the actions allowed for your role, an activity timeline and a comment thread.
• Notifications: a developer is notified when assigned a bug, and the reporting QA when a fix is ready for review.
• Dashboard: totals per status and Recharts charts - bugs over time, by developer, by fix type and by status - plus recent activity.
• Dark mode, a mobile navigation drawer and toast messages.

There is no global store library, on purpose. Almost all of the data is server state (bugs, comments, notifications, dashboard numbers) that belongs to one page at a time, so each page fetches it into local useState and refetches after every change. The only truly global state is the signed-in user, which lives in a small React Context. Permissions and the status workflow are enforced on the server, and the UI mirrors them by showing only the actions your role can take.

The store

// main.tsx - the only global state: who is signed in
type User = { id: number; name: string; role: "QA" | "DEVELOPER" };

const Auth = createContext<{
  user: User | null;
  setUser: (u: User | null) => void;
}>({ user: null, setUser: () => {} });

const useAuth = () => useContext(Auth);

// App: restore the session once, then provide it to every route
<Auth.Provider value={{ user, setUser }}>
  <Routes>
    <Route path="/login" element={user ? <Navigate to="/" /> : <Login />} />
    <Route path="/*" element={user ? <Shell /> : <Navigate to="/login" />} />
  </Routes>
</Auth.Provider>

The slices

How data flows

const api = axios.create({ baseURL: import.meta.env.VITE_API_URL || "/api" });

api.interceptors.request.use((c) => {
  const t = localStorage.getItem("token");
  if (t) c.headers.Authorization = `Bearer ${t}`;
  return c;
});

api.interceptors.response.use(
  (r) => r,
  (e) => {
    if (e.response?.status === 401) {
      localStorage.clear();      // expired or invalid session
      location.href = "/login";
    }
    return Promise.reject(e);
  },
);

if (req.user.role === "DEVELOPER") {
  const takingOpenBug = old.status === "OPEN" && body.status === "ASSIGNED";
  if (!takingOpenBug && old.assigneeId !== req.user.id)
    return res.status(403).json({ message: "Only your assigned bugs can be updated" });
  if (!["ASSIGNED", "IN_PROGRESS", "REVIEW"].includes(body.status))
    return res.status(403).json({ message: "Developers can move bugs to In Progress or Review" });
  if (old.status === "CLOSED")
    return res.status(400).json({ message: "Closed bugs cannot be changed" });
}

// QA may only close a bug or send it back to OPEN (rejected)
if (req.user.role === "QA" && ["OPEN", "CLOSED"].includes(body.status))
  data.status = body.status;

// ...after saving: write the activity log and notify
if (data.status === "REVIEW")
  await notify(old.creatorId, `Bug #${id} is ready for your review`, id);

const [filters, setFilters] = useState({ status: "", fixType: "", page: 1 });

const load = async (f = filters) =>
  setResult(
    (await api.get("/bugs", { params: { ...f, limit: 10, sort: "id", order: "asc" } })).data,
  );

useEffect(() => {
  load(); // refetch whenever a filter or the page changes
}, [filters]);

const updateStatus = async (status: string) => {
  try {
    await api.patch(`/bugs/${id}`, { status });
    load(); // server is the source of truth - re-read the bug
  } catch (error: any) {
    window.alert(error.response?.data?.message || "Could not update bug status.");
  }
};

// Only the actions valid for this role and status are rendered
{!qa && bug.status === "OPEN" && <button onClick={() => updateStatus("ASSIGNED")}>Take bug</button>}
{!qa && bug.status === "IN_PROGRESS" && <button onClick={() => updateStatus("REVIEW")}>Send to review</button>}
{qa && bug.status === "REVIEW" && <button onClick={() => updateStatus("CLOSED")}>Close bug</button>}

Design decisions

• Why no Redux? Only the signed-in user is shared across the whole app, and it rarely changes - a small Context is enough. Everything else is server data that one page owns, so keeping it local avoids a global store full of copies that can go stale.
• The server is the source of truth. Refetching after each change is simpler and safer than optimistic updates here, because the API can reject a change, assign the bug or log activity in the same request.
• Permissions live in two places. The API enforces every rule with 401/403 responses; the UI hides actions that aren't allowed. The UI is a convenience, the server is the guarantee.
• One API client. Axios interceptors add the token and handle expired sessions in one place instead of in every component.
• State derived from data. The status counts, the actions shown and the role headings are all computed from the current bug list and user - nothing is stored twice.
• Form state stays in the form. React Hook Form manages the login form, and the bug editor keeps its draft in local state until it is saved.