• mamy endpoint do wyszukiwania produktów

KA:

• Mamy plan i ogólny zarys jak mają wyglądać strony:
• Home Page
• Product Page
• Collection Page*
• Collection List*
• Cart
• Checkout
• 404

Jakie przewidujemy generyczne sekcje:

• Header
• Footer
• Hero Image with text overlay *
• Collection List
• Featured product
• Testimonials *
• Texts collumn with images *
• Slider *
• Rich text *
• Gallery *
• Logo list *
• Image with text *

* nie koniecznie do MVP

TODO:

• spisanie tasków
• dokument z inspiracjami do ww. komponentów i stron
• ustalenia co do narzędzi i bibliotek
• ustalenia co do architektury

siemaaa, sprawdzam jak to działa

KA:
Mamy stronę z widokiem produktu

Przykładowy widok:

TODO:

• Wyrównać ceny do dolnej krawędzi,
• poprawić wartość ceny (serwer zwraca grosze a nie złotówki)
• nie powinien wyswietlac sie dolar $

KA: Nawigacja

• Obsługa błędów 400 w formularzach

Komponent powinien wyświetlać listę produktów, powinien być responsywny

1. Sidebar powinien być stale widoczny w wersji desktopowej, w wersji mobilnej defaultowo schowany,
2. Sidebar powinien mieć header z logiem
3. Sidebar powinien mieć listę elementów do nawigacji, kwestią zastanowienia jest czy potrzebujemy grupować te elementy i dodać ich zwijanie

• statyczny komponent

inspiracje:

• poprawic RWD
• usunac link "o nas"

Nie ma endpointa na GET /products/{productId}

Mam tylko style

• w payloadzie requesta nie idzie regularPrice

• dodać html + css podsumowania (na makiecie Cart Totals)
• RWD na 320px brzydko się rozjeżdża (być może zrezygnować z tabeli na rzecz div-ów i flex-boxa jeśli table bedzie nieużywalne)
• templatka niech wyświetla zahardkodowane wartości póki co

podsumowanie zgodnie z

poprawki listy na 320px

Trzeba by tego hamburgerka trochę przesunąć...

• napisać skrypt (node?) który będzie dodawał produkty do bazy

KA:
Strona główna posiada następujące sekcje, które są komponentami reuzywalnymi:

Subtaski:

• Header #18
• Nawigacja #19
• Lista produktów #20

Przykładowa inspiracja

• mobile first, responsywny
• użyjmy czegoś gotowego typu Tailwind do ostylowania panelu admina
• myślę, że układ podobny do WordPressowego panelu będzie OK
• początkowo będziemy mieli tylko dodawanie produktów (lista, formularz)

Sugestie:

W README.md brakuje info o postgresie uruchamianym w dockerze. Przy zainstalowanym i uruchomionym lokalnie postgresie wystąpi konflikt portów.

• komponent z przyciskmi do sortowania produktów client-side
• lista produktów jest sortowana

• na produkcji paczka jest purgowana

• strona koszyka wyświetlająca liste produktow

inspiracja:

https://savoy.nordicmade.com/cart/

Na początek wystarczy zwykła belka, która na wersji mobilnej będzie wyświetlać hamburgera do rozwijania sidebar oraz logo

Przygotować formularz (html + css) ze spójnym widokiem z /koszyk

• strona na której można dokonać zakupu

tbd.
do ustalenia

inspiracje

https://savoy.nordicmade.com/checkout/

Kwestia dyskusji czy powinniśmy mieć na dodawanie produktów osobną stronę czy wystarczy modal.

Komponent powinien wyświetlać formularz z polami do dodawania poszczególny danych produktu, potrzebujemy zwykle pole, textarea a być może jakiś reach text editor oraz inne pola w zależności o jakie pola będą nam potrzebne. Przyda się też walidacja.

Do formularzy polecał bym użyć libki react hooks form

Na stronie z listą produktów mamy możliwość wyszukania

do doprecyzowania z zadaniem #26

• dodać komponent searcha (do osadzenia np. w headerze)
• działa na enter i blur po wpisaniu frazy

NTH:

• endpoint "/suggest" zwracajacy tablicę z sugestiami wyszukiwania na podstawie wpisanej frazy
  np: user wpisał w szukajke "pom" enndpoint zwraca: ["pompka", "pomidor"]

• grid który na podstawie propsów może mieć 2-5 kolumn

Tutaj chyba trzeba to poprawić. Importowanie svg z wykorzystaniem next-images nie zdaje egzaminu. Nie da się tego ostylować w komponencie. Teraz jest w Headerze coś takiego:

<img
    src={bagIconSrc}
    className="fill-current text-gray-800 mr-2"
    alt="Skelp TypeOfWeb"
/>

ikonka nie ma koloru text-gray-800 tylko jest czarna.

U produktach zrobiłem to tak, że wyrzuciłem svg to osobnych komponentów i je po prostu importuję jako komponenty:

const HeartIcon = () => {
  return (
    <svg
      className="h-6 w-6 fill-current text-gray-500 hover:text-black"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
    </svg>
  );
};

tbd.

• dodać endpointy
  POST /cart/add
  GET /cart

proponuję formaty zapytan i odp. jak w shopify:
https://shopify.dev/docs/themes/ajax-api/reference/cart

• konfiguracja z TS-em
• konfiguracja z https://github.com/testing-library/cypress-testing-library

TODO:

• wersja desktop
• wersja mobile

inspiracje: #14