Add zadanie.md

2025-09-29 09:47:03 +00:00 · 2025-09-29 09:47:03 +00:00 · 53f6ebc7e9
commit 53f6ebc7e9
1 changed files with 39 additions and 0 deletions
--- a/zadanie.md
+++ b/zadanie.md
@ -0,0 +1,39 @@
+# 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ą
+-   **Baza Danych In-Memory**: Użyj tablicy w pamięci (in-memory array) w tym Route jako tymczasowej "bazy danych"
+
+#### Implementacja Metod:
+
+-   **GET (Read)**: Zwracaj całą listę zadań
+-   **POST (Create)**: Dodawaj nowe zadanie do tablicy. 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