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

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

2.0 KiB Raw Permalink Blame History