From 53f6ebc7e9892b358cd2208fafadef86ee84533d Mon Sep 17 00:00:00 2001 From: czorek Date: Mon, 29 Sep 2025 09:47:03 +0000 Subject: [PATCH] Add zadanie.md --- zadanie.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 zadanie.md diff --git a/zadanie.md b/zadanie.md new file mode 100644 index 0000000..9f8177d --- /dev/null +++ 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