# Instrukcja do Zadania Live Coding: Lista Zadań (To-Do)

Przez następne **30-40 minut** Twoim zadaniem jest stworzenie prostej, w pełni funkcjonalnej aplikacji Lista Zadań (To-Do). Chcemy zobaczyć, jak integrujesz Next.js, bibliotekę komponentów Mantine oraz podstawową warstwę Fullstack.

> **Proszę, myśl na głos!** Interesuje nas Twój proces myślenia, podejście do rozwiązania problemu i zarządzanie stanem aplikacji, nie tylko finalny kod.

## Cele Zadania

### 1. Backend (Next.js API Route / Server action)

-   **API Route**: Stwórz jeden API Route w Next.js (np. `/api/todos`) lub akcję serwerową
-   **Przechowywanie Danych**: Użyj cookies do przechowywania listy zadań zamiast tablicy w pamięci

#### Implementacja Metod:

-   **GET (Read)**: Zwracaj całą listę zadań z cookies
-   **POST (Create)**: Dodawaj nowe zadanie do cookies. W celu zasymulowania opóźnienia sieci, zaimplementuj sztuczną pauzę (np. 1s) przed zwróceniem odpowiedzi.

### 2. Frontend (Next.js & Mantine)

-   **Struktura i Wygląd**: Użyj komponentów Mantine do stworzenia estetycznego i czytelnego układu strony głównej

#### Interfejs Dodawania Zadań (Modal):

-   Dodaj na stronie głównej przycisk **"Dodaj Nowe Zadanie"** (`Button`)
-   Po kliknięciu, przycisk musi otwierać komponent `Modal` (lub `Drawer`) z Mantine
-   Użyj hooka `useDisclosure` do zarządzania jego stanem
-   Wewnątrz modala umieść formularz z polem tekstowym (`TextInput`)

#### Stan Ładowania Przycisku:

-   Przycisk do wysyłania formularza (`Button`) musi używać stanu `loading` Mantine
-   W trakcie wysyłania żądania POST do API (w tym sztucznego opóźnienia), przycisk musi być w stanie ładowania
-   Po pomyślnym dodaniu zadania (i zakończeniu ładowania), modal musi się zamknąć

#### Lista Zadań (Wyświetlanie):

-   Po załadowaniu strony, pobierz dane z API (GET) i wyświetl je w formie listy na stronie głównej, używając komponentów Mantine
-   Lista musi odświeżać się automatycznie po dodaniu nowego zadania