12. Bug Tracker

Cel projektu

Zbudujesz system śledzenia błędów (bug tracker) — aplikację do zgłaszania, przeglądania i zarządzania błędami w projekcie softwarowym. Uproszczona wersja Jira lub GitHub Issues.

Czego się nauczycie?

Zaawansowany CRUD z wieloma polami i stanami
Filtrowanie wielokryterialne (status + priorytet + przypisany)
Komentarze do zgłoszeń (zagnieżdżone dane)
Historia zmian statusu
Praca zespołowa — jeden robi listę i filtry, drugi formularze i widok szczegółów

Co ma robić aplikacja?

Główne funkcjonalności

Lista bugów — tabela lub karty z ID, tytułem, priorytetem, statusem, datą
Formularz zgłoszenia — tytuł, opis, priorytet, kategoria, kroki do reprodukcji
Widok szczegółów — pełny opis, historia statusów, komentarze
Zmiana statusu — nowy → w trakcie → rozwiązany → zamknięty
Filtrowanie — po statusie, priorytecie, kategorii

Struktura danych

{
  "bugs": [
    {
      "id": "BUG-001",
      "title": "Formularz logowania nie działa na Safari",
      "description": "Użytkownicy Safari nie mogą się zalogować...",
      "priority": "critical",
      "status": "open",
      "category": "Frontend",
      "reportedBy": "Jan Kowalski",
      "assignedTo": "Anna Nowak",
      "createdAt": "2025-03-01",
      "comments": [
        { "id": "c-001", "author": "Anna Nowak", "text": "Sprawdzam...", "date": "2025-03-02" }
      ],
      "statusHistory": [
        { "status": "open", "date": "2025-03-01" },
        { "status": "in-progress", "date": "2025-03-02" }
      ]
    }
  ]
}

Warianty realizacji

Ocena: 3.0

Wszystko z Wariantu B
Kanban widok bugów (kolumny = statusy) z drag & drop
Przypisywanie do “użytkowników” (lista osób)
Custom hook useBugTracker z logiką
Export listy bugów do CSV
Wyszukiwarka pełnotekstowa

Ocena: 5.0-6.0

Wskazówki implementacyjne

Status workflow

const STATUS_FLOW = {
  open: ['in-progress'],
  'in-progress': ['resolved', 'open'],
  resolved: ['closed', 'open'],
  closed: [],
};

const STATUS_LABELS = {
  open: 'Otwarte',
  'in-progress': 'W trakcie',
  resolved: 'Rozwiązane',
  closed: 'Zamknięte',
};

const STATUS_COLORS = {
  open: '#ef4444',
  'in-progress': '#f59e0b',
  resolved: '#22c55e',
  closed: '#6b7280',
};

function StatusBadge({ status }) {
  return (
    <span
      style={{ backgroundColor: STATUS_COLORS[status] }}
      className="status-badge"
    >
      {STATUS_LABELS[status]}
    </span>
  );
}

Zasoby

GitHub Issues jako inspiracja Wzorcowy system śledzenia bugów — inspiracja dla UX.

Array.sort — MDN Sortowanie bugów po priorytecie i dacie.

Do dzieła!

Powodzenia!

Bug Tracker to projekt najbardziej zbliżony do prawdziwych narzędzi, których będziecie używać w pracy — Jira, GitHub Issues, Linear. Dobrze zbudowany system statusów i filtrów zrobi wrażenie na każdym rekruterze z branży IT!