Jak zbudować tablicę Kanban z AI - własne mini Trello w 30 minut

Otwórz Claude. Poważnie - zrób to teraz. Druga karta, zaloguj się i wróć.

Gotowe?

Za 30 minut będziesz mieć własną tablicę Kanban. Trzy kolumny. Karty z tytułami i opisami. Przeciąganie między kolumnami. Edycja inline. Kolorowe etykiety. Jeden plik HTML.

Trello jest darmowe. Notion też. Ale żaden gotowy tool nie nauczy Cię budować z AI.

Pokaż komukolwiek efekt końcowy - powiedzą: "Ty to napisałeś?". Odpowiedz: "Nie. Ale ja to zaprojektowałem."

To nie jest artykuł o tablicy Kanban. To jest artykuł o budowaniu z AI. Tablica to efekt uboczny. Kompetencja to cel.

TL;DR: 4 rzeczy, które wyniesiesz z tego artykułu:

• Działająca tablica Kanban - 3 kolumny, drag & drop, edycja, kolorowe etykiety
• 6 gotowych promptów CRISP - kopiujesz, wklejasz do Claude, dostajesz kod
• Zero kodowania, zero instalacji - jeden plik HTML, otwierasz w przeglądarce
• Drag & drop - najbardziej wizualnie robiąca wrażenie rzecz, jaką zbudujesz z AI

---

Poziom 2 (średniozaawansowany) | Seria "Zbuduj to z AI" | 6 kroków | 6 promptów CRISP | 1 plik HTML | 0 instalacji | ~30 minut

---

Co zbudujemy

Funkcja	Krok
Layout tablicy - 3 kolumny, przykładowe karty	#1
Dodawanie i usuwanie kart	#2
Edycja inline (double-click na tytuł)	#3
Drag & drop między kolumnami	#4
Mobile support + localStorage	#5
Kolory etykiet, liczniki, animacje	#6

Stack: Jeden plik HTML. Otwierasz w przeglądarce - działa. Offline (po pierwszym załadowaniu polyfilla).

Zobacz gotową tablicę Kanban - efekt końcowy, który zbudujesz w tym tutorialu.

---

Krok 0: Przygotowanie (1 minuta)

Identycznie jak w timerze Pomodoro - zero rejestracji, zero kluczy API.

Co potrzebujesz:

1. Przeglądarkę - Chrome, Firefox, Edge, Safari
2. Edytor tekstu - Notatnik, VS Code, cokolwiek
3. Claude - darmowe konto na claude.ai

Utwórz nowy plik: kanban.html. To będzie jedyny plik.

---

Krok 1: Layout tablicy (Prompt #1)

---

Stan aplikacji: Pusty plik kanban.html. Zaczynamy od zera.

Czas na ten krok: ~5 minut

---

Zaczynamy od wyglądu. Trzy kolumny, kilka przykładowych kart, profesjonalny design. Nic jeszcze nie działa, ale wygląda jak Trello.

Dlaczego ten prompt działa

Prompt używa formatu CRISP - tego samego, co w tutorialach pogodowym i Pomodoro:

Element	Co robi	W tym prompcie
Context	Kontekst projektu	Jeden plik HTML, tablica Kanban
Role	Rola AI	UI/UX designer, narzędzia produktywności
Intent	Cel	Layout 3 kolumn z kartami
Scope	Ograniczenia	Ciemny motyw, responsywny, po polsku
Precision	Format odpowiedzi	Pełny plik HTML

Pełne wyjaśnienie metody: Inżynieria promptów - Framework CRISP

Prompt do skopiowania

Otwórz Claude i wklej:

<context>
Buduję tablicę Kanban (styl Trello) w jednym pliku HTML
(z CSS i JavaScript w środku). Aplikacja ma działać po otwarciu
pliku .html w przeglądarce - zero serwera, zero instalacji.
To narzędzie do zarządzania zadaniami w trzech etapach.
</context>

<role>
Jesteś UI/UX designerem specjalizującym się w narzędziach
produktywności i interfejsach typu dashboard.
</role>

<intent>
Stwórz wygląd tablicy Kanban:
1. Nagłówek strony: "Moja Tablica Kanban" z datą
2. Trzy kolumny obok siebie:
   - "Do zrobienia" (akcent: #ff6b6b)
   - "W trakcie" (akcent: #feca57)
   - "Gotowe" (akcent: #51cf66)
3. Każda kolumna ma:
   - Kolorowy nagłówek z nazwą i liczbą kart
   - Przycisk "+" do dodawania (jeszcze nie musi działać)
   - Miejsce na karty
4. Dodaj 3-4 przykładowe karty w różnych kolumnach
5. Każda karta: tytuł (pogrubiony), krótki opis (1 zdanie),
   data utworzenia, przycisk X do usuwania
6. Karty z subtelnymi cieniami i zaokrąglonymi rogami
</intent>

<scope>
- Jeden plik HTML - style i skrypt w środku
- Ciemny motyw: tło #0f0f23, kolumny #1a1a3e,
  karty #252547 z border 1px #333366
- Kolumny w układzie flex - 3 obok siebie na desktopie,
  pionowo na telefonie
- Polski interfejs
- Karty jeszcze NIE muszą być interaktywne
- Komentarze w kodzie po polsku
- Responsywny: na telefonie kolumny układają się pionowo
</scope>

<precision>
Zwróć KOMPLETNY plik HTML gotowy do zapisania i otwarcia
w przeglądarce. Pełna implementacja wyglądu z przykładowymi
kartami. Kod czytelny i dobrze skomentowany.
</precision>

Co dostaniesz

Trzy kolumny obok siebie z kolorowymi nagłówkami. Przykładowe karty z tytułami i opisami. Ciemny motyw. Wygląda jak mini Trello.

Weryfikacja

• Trzy kolumny są widoczne obok siebie
• Każda ma kolorowy nagłówek
• Przykładowe karty się wyświetlają
• Na telefonie (zmniejsz okno) kolumny układają się pionowo

Co się tu uczysz

• CSS Flexbox - układ kolumnowy to display: flex z gap. Każda kolumna to flex: 1. Proste i potężne.
• Semantyczny HTML - kolumny to <div class="column">, karty to <div class="card">. Struktura odzwierciedla logikę.
• Responsywność - @media (max-width: 768px) zmienia flex-direction z row na column.

---

Krok 2: Dodawanie i usuwanie kart (Prompt #2)

---

Stan aplikacji: Piękna tablica z trzema kolumnami i przykładowymi kartami. Ale nic nie działa - nie można dodać ani usunąć karty.

Czas na ten krok: ~5 minut

---

Pierwszy krok interaktywności. Kliknij "+" - pojawia się pole na nową kartę. Kliknij X na karcie - znika. Od tego momentu tablica zaczyna być użyteczna.

Prompt do skopiowania

Wklej do Claude (w tej samej rozmowie - Claude pamięta kontekst):

<context>
Mam statyczną tablicę Kanban w jednym pliku HTML. Trzy kolumny
z przykładowymi kartami. Chcę dodać możliwość tworzenia
i usuwania kart.
</context>

<role>
Jesteś frontend developerem specjalizującym się w dynamicznych
interfejsach i zarządzaniu stanem aplikacji w vanilla JavaScript.
</role>

<intent>
Dodaj dodawanie i usuwanie kart:
1. Kliknięcie "+" na kolumnie:
   - Pokazuje pole tekstowe na górze kolumny
   - Enter tworzy nową kartę z wpisanym tytułem
   - Escape anuluje (chowa pole)
   - Pusty tekst nie tworzy karty
2. Kliknięcie X na karcie:
   - Wyświetla confirm() "Usunąć tę kartę?"
   - OK usuwa, Anuluj pozostawia
3. Stan tablicy trzymaj w obiekcie JavaScript:
   - Tablica columns z obiektami {id, title, cards:[]}
   - Każda karta: {id, title, description, createdAt}
   - ID generuj z Date.now() + losowy string
4. Po każdej zmianie: przerenderuj karty z danych
   (nie manipuluj DOM bezpośrednio - renderuj z tablicy state)
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Usuń przykładowe karty z HTML - generuj je z kodu JavaScript
  (dodaj 3-4 domyślne karty w obiekcie state)
- Pole dodawania: input z placeholder "Nowe zadanie..."
  i przycisk "Dodaj" obok
- Animacja: nowa karta pojawia się z efektem fade-in
- Zachowaj cały istniejący wygląd
</scope>

<precision>
Zwróć KOMPLETNY, zaktualizowany plik HTML.
Nie pomijaj istniejącego kodu - pełna implementacja.
</precision>

Co się zmieni

Tablica ożywa. Klik "+" - wpisujesz tytuł - Enter - karta pojawia się w kolumnie. Klik X - karta znika. Stan jest w JavaScript - to fundament do drag & drop.

Weryfikacja

• Kliknij "+" na dowolnej kolumnie
• Wpisz tekst i wciśnij Enter - karta się pojawi
• Kliknij X na karcie - pojawi się pytanie o potwierdzenie
• Po potwierdzeniu karta zniknie
• Licznik kart w nagłówku kolumny się aktualizuje

Co się tu uczysz

• State-driven rendering - zamiast zmieniać HTML ręcznie, trzymasz dane w JS i renderujesz z nich. To ten sam wzorzec, którego używa React. Tylko bez frameworka.
• Event delegation - zamiast dodawać event listener do każdej karty, dodajesz jeden do kolumny i sprawdzasz e.target. Wydajne i czyste.
• Generowanie ID - Date.now() + Math.random().toString(36) daje unikalne identyfikatory bez bibliotek.

---

Krok 3: Edycja inline (Prompt #3)

---

Stan aplikacji: Tablica z dodawaniem i usuwaniem kart. Ale żeby zmienić tytuł karty, trzeba ją usunąć i dodać nową. To niewygodne.

Czas na ten krok: ~5 minut

---

Edycja inline to "double-click na tytuł, zmień tekst, Enter zapisuje." Proste dla użytkownika. Trochę sprytniejsze pod spodem.

Prompt do skopiowania

<context>
Moja tablica Kanban pozwala dodawać i usuwać karty.
Chcę dodać możliwość edycji tytułu i opisu karty
bez usuwania jej.
</context>

<role>
Jesteś frontend developerem z doświadczeniem w edycji inline
i obsłudze zdarzeń klawiatury.
</role>

<intent>
Dodaj edycję inline:
1. Podwójne kliknięcie (dblclick) na tytuł karty:
   - Tytuł staje się edytowalny (contentEditable = true)
   - Tekst jest zaznaczony (aby można go od razu nadpisać)
   - Enter zapisuje nowy tytuł
   - Escape cofa do poprzedniej wartości
   - Kliknięcie poza kartą (blur) zapisuje
2. Kliknięcie na kartę (pojedyncze, nie na tytuł):
   - Rozwija panel opisu pod kartą
   - Textarea z opisem (edytowalny)
   - Przycisk "Zapisz" zamyka panel i aktualizuje opis
3. Wizualne wskazówki:
   - Kursor zmienia się na "text" nad tytułem
   - Edytowany tytuł ma subtelną ramkę
   - Panel opisu rozwija się z animacją
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Pusta karta (bez opisu): pokazuje tekst "Kliknij, aby dodać opis"
  w kolorze #666
- Nie nadpisuj funkcji dodawania/usuwania
- Po edycji: zaktualizuj obiekt state i przerenderuj
</scope>

<precision>
Zwróć KOMPLETNY plik HTML ze wszystkimi zmianami.
Zachowaj dotychczasową funkcjonalność.
</precision>

Co się zmieni

Podwójne kliknięcie na tytuł - możesz go edytować. Kliknięcie na kartę - rozwija panel z opisem. Pełny CRUD (Create, Read, Update, Delete) bez drag & drop.

Weryfikacja

• Double-click na tytuł karty - zamienia się w edytowalne pole
• Zmień tekst, wciśnij Enter - tytuł się zaktualizuje
• Wciśnij Escape - wraca stary tytuł
• Kliknij na kartę - rozwinie się panel opisu
• Wpisz opis, kliknij Zapisz - opis się zachowa

Jeśli double-click nie działa:

"Edycja inline nie reaguje na podwójne kliknięcie. Sprawdź, czy event listener dblclick jest dodany do elementu .card-title, a nie do całej karty."

Co się tu uczysz

• contentEditable - atrybut HTML, który zamienia dowolny element w edytowalne pole. Bez tworzenia input/textarea. Eleganckie rozwiązanie.
• Selection API - window.getSelection().selectAllChildren() zaznacza cały tekst po double-clicku. UX detail, który robi różnicę.
• Event handling - Enter, Escape, blur - trzy sposoby zakończenia edycji. Każdy wymaga innej obsługi.

---

Krok 4: Drag and drop (Prompt #4)

---

Stan aplikacji: Pełny CRUD - dodawanie, usuwanie, edycja kart. Ale przenoszenie karty między kolumnami? Trzeba usunąć i dodać w innej. To najbardziej brakujący element Kanban.

Czas na ten krok: ~5 minut

---

To jest kluczowy krok. Drag and drop to "wow factor" - moment, gdy tablica zaczyna zachowywać się jak prawdziwe Trello. HTML ma wbudowane API do przeciągania. Claude je zna.

Jak działa HTML Drag and Drop API?

Trzy fazy:

1. dragstart - użytkownik chwyta kartę (kliknie i trzyma)
2. dragover - karta przelatuje nad kolumną (musi być e.preventDefault())
3. drop - użytkownik upuszcza kartę (aktualizujesz stan)

Prompt do skopiowania

<context>
Moja tablica Kanban ma CRUD kart (dodawanie, usuwanie, edycja).
Chcę dodać przeciąganie kart między kolumnami - kluczową
funkcję tablicy Kanban.
</context>

<role>
Jesteś frontend developerem z doświadczeniem w HTML5 Drag
and Drop API i budowaniu interaktywnych interfejsów.
</role>

<intent>
Dodaj drag and drop:
1. Każda karta jest draggable (atrybut draggable="true")
2. Przeciąganie karty:
   - Karta staje się półprzezroczysta (opacity 0.5)
   - Pod spodem zostaje "duch" - pusty placeholder
3. Przenoszenie nad kolumną:
   - Kolumna podświetla się (subtelna ramka lub tło)
   - Karta "ląduje" na pozycji zależnej od kursora
     (użyj funkcji getDragAfterElement do ustalenia pozycji
      na podstawie Y kursora)
4. Upuszczenie karty:
   - Aktualizuj obiekt state (przenieś kartę do nowej kolumny)
   - Przerenderuj tablicę
5. Możliwość zmiany kolejności kart w tej samej kolumnie
6. Animacja: karta płynnie "wchodzi" na nowe miejsce
   (CSS transition)
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Drag and drop na desktopie (mobile w następnym kroku)
- Wizualne feedbacki: kursor grab/grabbing, podświetlenie
  strefy drop, placeholder w miejscu opuszczenia
- e.preventDefault() w dragover - KRYTYCZNE, bez tego
  drop nie zadziała
- Zachowaj edycję inline (dblclick) - drag nie powinien
  kolidować z kliknięciem
</scope>

<precision>
Zwróć KOMPLETNY plik HTML ze wszystkimi zmianami.
Zachowaj całą dotychczasową funkcjonalność (CRUD, edycja).
</precision>

Co się zmieni

Chwytasz kartę, przeciągasz do innej kolumny, upuszczasz. Karta ląduje na nowym miejscu. Liczniki kolumn się aktualizują. To jest moment "wow" tego tutoriala.

Wskazówka: Drag & drop działa na desktopie. Na telefonie - jeszcze nie. Mobile support dodajemy w kroku 5.

Weryfikacja

• Chwyć kartę (kliknij i przytrzymaj) - kursor zmieni się na "grab"
• Przeciągnij nad inną kolumną - kolumna się podświetli
• Upuść kartę - ląduje w nowej kolumnie
• Licznik kart w obu kolumnach się zaktualizuje
• Przeciągnij kartę w ramach tej samej kolumny - zmienia pozycję

Jeśli drag & drop nie działa:

"Przeciąganie nie działa. Sprawdź: (1) Czy karty mają atrybut draggable='true'. (2) Czy kolumny mają event listener na 'dragover' z e.preventDefault(). (3) Czy event 'drop' aktualizuje state i wywołuje renderowanie."

Co się tu uczysz

• HTML5 Drag and Drop API - wbudowane w przeglądarkę, nie wymaga bibliotek. Trzy eventy (dragstart, dragover, drop) wystarczą do funkcjonalnego drag & drop.
• dataTransfer - obiekt, który przenosi dane między eventem drag a drop. Używasz setData/getData do przekazania ID karty.
• getDragAfterElement - funkcja obliczająca, gdzie wstawić kartę na podstawie pozycji kursora. To najtrudniejszy element - Claude napisze ją za Ciebie.

---

Krok 5: Mobile support + localStorage (Prompt #5)

---

Stan aplikacji: Pełna tablica Kanban z drag & drop na desktopie. Dwa braki: (1) na telefonie nie da się przeciągać, (2) dane znikają po odświeżeniu.

Czas na ten krok: ~5 minut

---

Dwa problemy w jednym kroku. Mobile - dodajemy polyfill z CDN (jedna linia). localStorage - zapisujemy stan po każdej zmianie.

Dlaczego drag & drop nie działa na telefonie?

HTML Drag and Drop API nie obsługuje touch events. To znana luka. Rozwiązanie: polyfill DragDropTouch - mały skrypt, który mapuje dotyk na zdarzenia drag. Jedna linia w <head>.

Prompt do skopiowania

<context>
Moja tablica Kanban działa na desktopie: CRUD kart, edycja,
drag & drop. Dwa problemy:
(1) Drag & drop nie działa na telefonach (brak touch support).
(2) Dane znikają po odświeżeniu strony (brak persistence).
</context>

<role>
Jesteś frontend developerem z doświadczeniem w mobile-first
development i client-side storage.
</role>

<intent>
Dodaj mobile support i localStorage:
1. Mobile drag & drop:
   - Dodaj polyfill DragDropTouch z CDN w tagu script:
     https://cdn.jsdelivr.net/npm/drag-drop-touch@1.3.1/dist/drag-drop-touch.esm.min.js
     (type="module")
   - Zero zmian w kodzie drag & drop - polyfill automatycznie
     mapuje touch events na drag events
2. localStorage:
   - Klucz: "kanban_v1_state"
   - Po każdej zmianie (dodanie, usunięcie, edycja, przeniesienie):
     zapisz cały state do localStorage
   - Przy starcie strony: załaduj state z localStorage
   - Jeśli brak danych: użyj domyślnych kart
3. Przycisk "Wyczyść tablicę" w nagłówku:
   - Usuwa wszystkie karty po confirm()
   - Resetuje do pustych kolumn
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Polyfill wymaga internetu przy pierwszym załadowaniu
  (CDN) - poinformuj o tym komentarzem w kodzie
- localStorage: JSON.stringify przy zapisie,
  JSON.parse przy odczycie
- Obsłuż błąd parsowania (try/catch) - gdyby dane
  w localStorage były uszkodzone
</scope>

<precision>
Zwróć KOMPLETNY plik HTML ze wszystkimi zmianami.
Zachowaj całą dotychczasową funkcjonalność.
</precision>

Co się zmieni

Dwie rzeczy naraz. Na telefonie możesz teraz przeciągać karty dotykiem. A po odświeżeniu strony - karty nadal są na miejscu.

Weryfikacja

• Otwórz na telefonie (lub w trybie mobilnym F12 -> Toggle device toolbar)
• Dotknij kartę i przeciągnij - działa jak na desktopie
• Dodaj nową kartę, odśwież stronę (F5) - karta nadal jest
• Zamknij i otwórz przeglądarkę - dane nadal tam

Jeśli drag & drop na mobile nie działa:

"Polyfill DragDropTouch się nie ładuje. Sprawdź: (1) Czy skrypt jest załadowany z type='module'. (2) Czy masz połączenie z internetem (CDN). (3) Sprawdź konsolę (F12) - czy jest błąd ładowania skryptu."

Co się tu uczysz

• Polyfill - skrypt, który dodaje brakującą funkcjonalność do przeglądarki. Jedna linia naprawia problem, na który inaczej potrzebujesz 100 linii kodu.
• localStorage - JSON.stringify zamienia obiekt JS na tekst. JSON.parse zamienia tekst z powrotem na obiekt. Dwie metody do zapamiętania.
• Defensive coding - try/catch przy parsowaniu danych chroni przed crashem, gdy dane są uszkodzone.

---

Krok 6: Kolory, liczniki, animacje (Prompt #6)

---

Stan aplikacji: Kompletna tablica Kanban - CRUD, edycja, drag & drop, mobile, localStorage. Działa. Ale wygląda "surowo." Pora na szlif.

Czas na ten krok: ~5 minut

---

Ostatni krok. Dodajemy detale, które robią różnicę między "działa" a "robi wrażenie."

Prompt do skopiowania

<context>
Moja tablica Kanban jest funkcjonalnie kompletna: CRUD,
edycja inline, drag & drop (desktop + mobile), localStorage.
Chcę dodać wizualne detale, które sprawią, że będzie wyglądać
profesjonalnie.
</context>

<role>
Jesteś UI/UX designerem i frontend developerem specjalizującym
się w micro-interactions i polish wizualnym.
</role>

<intent>
Dodaj detale wizualne:
1. Kolorowe etykiety na kartach:
   - Kliknięcie prawym na kartę (lub długi dotyk na mobile)
     pokazuje paletę 6 kolorów
   - Wybrany kolor pojawia się jako pasek na górze karty
   - Kolory: czerwony, pomarańczowy, żółty, zielony,
     niebieski, fioletowy
2. Licznik kart w nagłówku każdej kolumny (aktualizowany)
3. Przycisk "Wyczyść gotowe" w kolumnie Gotowe:
   - Usuwa wszystkie karty z tej kolumny
   - Z potwierdzeniem confirm()
4. Animacje CSS:
   - Nowa karta: slide-in z góry
   - Usunięta karta: fade-out
   - Przeciągana karta: rotate(2deg) i powiększony cień
   - Hover na karcie: delikatne podniesienie (translateY(-2px))
5. Data utworzenia na karcie w formacie "DD.MM" (mała czcionka)
6. Responsywny nagłówek z nazwą tablicy i przyciskami
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- To jest FINALNA wersja - pełna i kompletna
- Kolory etykiet zapisywane w state i localStorage
- Animacje w CSS (transitions i keyframes), nie w JavaScript
- Zachowaj wydajność - żadnych ciężkich animacji
</scope>

<precision>
Zwróć KOMPLETNY, FINALNY plik HTML. To jest ostateczna
wersja tablicy Kanban - zawiera WSZYSTKO: layout, CRUD,
edycja, drag & drop, mobile, localStorage, kolory, animacje.
Pełny, gotowy do użycia kod.
</precision>

Co dostaniesz

Profesjonalna tablica Kanban. Kolorowe etykiety na kartach. Płynne animacje. Liczniki kart. Przycisk czyszczenia. Detale, które sprawiają, że wygląda jak prawdziwa aplikacja.

Weryfikacja

• Kliknij prawym na kartę - paleta kolorów
• Wybierz kolor - pasek na górze karty
• Dodaj kartę - animacja slide-in
• Usuń kartę - animacja fade-out
• Przeciągnij kartę - obrót i cień
• Kliknij "Wyczyść gotowe" - wszystkie z kolumny Gotowe znikną
• Odśwież stronę - kolory etykiet nadal widoczne

Co się tu uczysz

• CSS animations - @keyframes definiują animację. animation ją uruchamia. Dwie reguły CSS = profesjonalny efekt.
• CSS transitions - transition: transform 0.2s sprawia, że każda zmiana pozycji jest płynna. Jedna linia CSS.
• Context menu - contextmenu event (prawy klik) pozwala tworzyć własne menu. Na mobile zastępujesz go długim dotykiem (touchstart z timeoutem).

---

Efekt końcowy - co masz po 30 minutach

Zobacz działającą tablicę Kanban - dokładnie taki efekt uzyskasz po przejściu 6 kroków.

Funkcja	Status
3 kolumny: Do zrobienia, W trakcie, Gotowe	Działa
Dodawanie kart (klik + Enter)	Działa
Usuwanie kart (X + potwierdzenie)	Działa
Edycja inline (double-click na tytuł)	Działa
Panel opisu karty	Działa
Drag & drop między kolumnami (desktop)	Działa
Drag & drop na telefonie (polyfill)	Działa
Zmiana kolejności kart w kolumnie	Działa
localStorage (dane przetrwają odświeżenie)	Działa
Kolorowe etykiety	Działa
Animacje (slide-in, fade-out, hover)	Działa
Liczniki kart w kolumnach	Działa
Przycisk "Wyczyść gotowe"	Działa
Responsywny design	Działa

Jeden plik. Offline. Bez konta. Własne mini Trello.

---

Co się właśnie nauczyłeś

To był Poziom 2 - trudniejszy niż aplikacja pogodowa i timer Pomodoro. Trzy nowe kompetencje:

1. Zarządzanie stanem

Cały stan tablicy żyje w jednym obiekcie JavaScript. Każda zmiana: dodanie, usunięcie, edycja, przeniesienie - aktualizuje ten obiekt i renderuje UI z danych. To jest fundamentalny wzorzec każdej aplikacji webowej.

2. Drag and drop

HTML5 Drag and Drop API plus polyfill na mobile. Trzy eventy. Jedna funkcja pozycjonowania. Wizualne feedbacki. To jest ta sama technologia, której używa Trello, Notion i każdy "przeciągnij tutaj."

3. Progresywna złożoność

6 kroków - od statycznego layoutu do interaktywnej aplikacji. Każdy krok dodaje jedną warstwę. Nie budowaliśmy wszystkiego naraz. To jest wzorzec, który skaluje się na dowolnie złożone projekty.

---

5 kierunków rozbudowy

1. Własne kolumny

"Dodaj możliwość tworzenia, edycji i usuwania kolumn. Przycisk 'Dodaj kolumnę' na końcu tablicy. Nazwy kolumn edytowalne inline."

2. Filtry i wyszukiwanie

"Dodaj pole wyszukiwania, które filtruje karty po tytule i opisie. Dodaj filtry po kolorze etykiety."

3. Termin wykonania

"Dodaj pole 'Deadline' na kartach (date picker). Karty po terminie - czerwona ramka. Karty bliskie terminu (2 dni) - żółta."

4. Eksport / import

"Dodaj przyciski: 'Eksportuj jako JSON' (pobiera plik) i 'Importuj z JSON' (ładuje dane z pliku). Umożliwia backup i przenoszenie między urządzeniami."

5. Wiele tablic

"Dodaj możliwość tworzenia wielu tablic (np. Praca, Dom, Hobby). Sidebar z listą tablic. Każda tablica ma własny state w localStorage."

---

Najczęstsze problemy i rozwiązania

Problem	Przyczyna	Rozwiązanie
Drag & drop nie działa	Brak e.preventDefault() w dragover	"Dodaj e.preventDefault() w event listener dragover na kolumnach"
Karta nie ląduje w dobrej pozycji	Brak getDragAfterElement	"Dodaj funkcję ustalającą pozycję karty na podstawie kursora Y"
Na telefonie nie da się przeciągać	Brak polyfilla	Sprawdź, czy <script type="module" src="...drag-drop-touch..."> jest w <head>
Dane znikają po odświeżeniu	Brak zapisu do localStorage	"Wywołaj saveState() po każdej operacji CRUD i drag & drop"
Edycja koliduje z drag	dblclick + dragstart	"Dodaj warunek: rozpocznij drag dopiero po 150ms przytrzymania"
Karty się duplikują	Render bez czyszczenia	"Dodaj container.innerHTML = '' przed renderowaniem kart"

---

Nie chodzi o tablicę. Chodzi o to, co budujesz dalej.

W timerze Pomodoro budowałeś narzędzie dla siebie. Dzisiaj zbudowałeś coś, co możesz pokazać innym. Tablica Kanban z drag & drop to artefakt, który mówi: "Umiem budować z AI."

To jest różnica między Poziomem 1 a Poziomem 2. Nie chodzi o złożoność kodu. Chodzi o to, że efekt jest na tyle wizualny i funkcjonalny, że można go użyć jako dowód kompetencji.

Następny krok? Tracker nawyków z AI - z siatką w stylu GitHub i wykresami Chart.js. Poziom 2, nowe technologie, nowy "wow factor."

---

Co dalej

Chcesz...	Przeczytaj
Zbudować tracker nawyków	Tracker nawyków z AI
Opanować promptowanie	Framework CRISP
Budować zaawansowane aplikacje	Vibe coding z Claude Code
Przejść kurs od zera	Kurs Claude AI - darmowy, 38 lekcji

Jeśli jesteś nowy na blogu - Zacznij Tutaj. 3 ścieżki nauki dopasowane do Twojej roli.

---

Ten artykuł to część serii "Zbuduj to z AI". Zobacz też: Aplikacja pogodowa | Timer Pomodoro | Tracker nawyków