Full-stack e-commerce platforma

Uloga: Lični projekat · Godina: 2023 - 2024 · Status: isporučeno

ukratko: Shoply je Angular prodavnica nad Hasura GraphQL katalogom. Server radi pretragu, filtriranje, sortiranje i paginaciju, a korpa i lista želja žive u browser-u. Najviše posla je otišlo na klijentsko stanje koje preživi refresh, zastarele podatke i loš unos.

Problem

Prodavnica deluje jednostavno dok se stanje ne nagomila. Filteri kataloga, korpa, lista želja i naplata u više koraka moraju da se slažu međusobno i da prežive osvežavanje stranice. Shoply sam napravio da to stanje prođem pažljivo, bez prečica.

Ograničenja

• Katalog je udaljen i samo za čitanje. Proizvodi dolaze sa hostovane Hasura instance. Frontend nikad ne piše u nju, pa ne može da pretpostavi da proizvod sačuvan u korpi pre nedelju dana još ima istu zalihu.
• Skladište browser-a je nepouzdan ulaz. Korpa i lista želja se čuvaju u localStorage, gde može da završi bilo šta: stari format, ručno izmenjena vrednost, napola upisan JSON.
• Testovi ne smeju da zavise od hostovanog backend-a. Ako Hasura padne, testovi i dalje moraju da prođu.

Odluke

• Upiti kataloga na serveru. Pretraga, filteri po kategoriji i ceni, sortiranje i paginacija idu u jedan GraphQL upit, pa browser dobija samo stranu koju prikazuje.
• Signali za stanje. Korpa, lista želja i naplata su servisi zasnovani na signalima, sa izračunatim totalima.
• Verzionisan format korpe. Sačuvana korpa nosi polje version. Pri učitavanju se svaka stavka validira, količine se ograničavaju na dostupnu zalihu, a korpe u starijem formatu se migriraju umesto da se bace.
• Lazy loading. Svaka ruta se učitava lenjo, a Apollo provideri stižu tek sa katalogom, pa GraphQL kod ne ulazi u početni shell.
• Naplata je demo tok. Podaci za dostavu se validiraju, a korak plaćanja nudi karticu, PayPal i uplatu na račun kao demo opcije. Nijedno plaćanje se ne obrađuje.

Ishod

Jest skup zahteva 100% pokrivenosti grana, funkcija, linija i naredbi. Cypress pokriva početnu stranu, katalog, korpu i listu želja nad determinističkim GraphQL fixture-ima, pa end-to-end testovi nikad ne diraju hostovani servis. Prodavnica je živa na Netlify-ju.