przygotuj mi UI aplikacji webowej do składanie zamówień kebabów
uzytkownik wybiera z listy kebabów którycche zamówić i opłacić
lokal może dodawać, edytować kebaby, oraz na dostęp do listy zamówionych kebebów
Aplikacja do zamawiania kebabów
Przygotowałem UI aplikacji webowej do składania zamówień kebabów, z funkcjonalnościami dla klientów i personelu lokalu.
Opis aplikacji
Stworzyłem kompletną aplikację webową do zamawiania kebabów z następującymi funkcjonalnościami:
Dla klientów:
- Strona główna - prezentuje lokal i popularne kebaby
- Menu - lista dostępnych kebabów z możliwością dodania do koszyka
- Koszyk - podgląd wybranych produktów z możliwością zmiany ilości
- Płatność - formularz z danymi dostawy i wyborem metody płatności
- Potwierdzenie zamówienia - informacja o przyjęciu zamówienia
Dla personelu lokalu:
Panel administracyjny z dwiema zakładkami:
- Zamówienia - lista bieżących zamówień z możliwością zmiany statusu
- Menu - zarządzanie ofertą kebabów (dodawanie, edycja, usuwanie)
Aplikacja jest w pełni responsywna i oferuje intuicyjny interfejs użytkownika. Wykorzystuje nowoczesne komponenty UI z biblioteki shadcn/ui oraz Tailwind CSS dla stylizacji.
dodaj nową podstronę, na zdjęciu jest przykładowy diagram przygotuj kafelkowy panel do składania zamówień przez panel przechodzimy wybierając z każdej kategorii
- na miejscu, na wynos
- danie (kebab, frytki, sałątki)
- w przypadku kebaba - mięso (kurczak, wołowina, mieszane)
- w przypadku kebaba - sos (łagodny, pikantny, mieszany)
- dodatki
podsumowanie cena, przyciski zamów coś jeszce, przejdz do koszyka
Kafelkowy panel do składania zamówień
Dodam nową podstronę z kafelkowym panelem do składania zamówień, który będzie prowadził użytkownika przez proces wyboru opcji zgodnie z przedstawionym diagramem.
Opis implementacji
Stworzyłem nową podstronę /order-builder, która implementuje kafelkowy panel do składania zamówień zgodnie z przedstawionym diagramem. Oto główne cechy implementacji:
Proces zamawiania krok po kroku:
- Wybór sposobu realizacji: Na miejscu lub na wynos
- Wybór dania: Kebab, Zestaw & Box & Frytki, lub Sałatki
- Wybór mięsa (tylko dla kebaba): Kurczak, Wołowina, lub Mieszane
- Wybór sosu (tylko dla kebaba): Łagodny, Ostry, lub Mieszany
- Wybór dodatków: Możliwość zaznaczenia wielu dodatków
- Podsumowanie zamówienia: Wyświetlenie wszystkich wyborów i całkowitej ceny
Funkcjonalności:
- Wskaźnik postępu: Pokazuje aktualny krok w procesie zamawiania
- Dynamiczna cena: Aktualizowana na podstawie wybranych opcji
- Responsywny design: Działa na urządzeniach mobilnych i desktopowych
- Intuicyjny interfejs: Duże kafelki z ikonami dla łatwego wyboru
- Przyciski nawigacyjne: "Zamów coś jeszcze" i "Przejdź do koszyka"
Dodatkowo, zaktualizowałem stronę główną i menu, dodając przyciski prowadzące do nowego kreatora zamówień, aby użytkownicy mogli łatwo znaleźć tę funkcjonalność.
potrzebna jest nowa strona ze szczegółami produktu / dania