40 lines
2.0 KiB
Markdown
40 lines
2.0 KiB
Markdown
# 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
|