RTSoft Clothing E-Shop
Semestrální projekt vytvořený ve spolupráci s firmou RTSoft. Jde o moderní e-shop s oblečením zaměřený na plynulý nákupní proces, responzivní design a snadno udržovatelný kód. Uživatelé mohou procházet filtrovatelný katalog s variantami zboží, spravovat košík, projít vícestupňovým nákupním procesem a sledovat historii svých objednávek. Administrátoři mají k dispozici přehledný panel pro správu produktů, objednávky a základní analytiku. Součástí projektu bylo i uživatelské testování (usability testing) s reálnými testery a následná iterace rozhraní.
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Zustand
- TanStack Query
- TanStack Router
- TanStack Table
- i18next
Náhled projektu
Kontext
Cílem projektu vyvíjeného ve spolupráci s firmou RTSoft bylo vytvořit reálnou e-commerce aplikaci s důrazem na skvělou použitelnost, čistou architekturu a dlouhodobě udržovatelný kód.
Technický přístup
- React SPA s využitím TanStack Routeru a vnořených layouty
- TanStack Query pro synchronizaci a správu serverového stavu
- Zustand pro lehkou globální správu stavu košíku
- Znovupoužitelné UI komponenty postavené na kombinaci shadcn/ui a Tailwind CSS
- Lokalizační vrstva postavená na i18next
Výzvy
- Návrh vícestupňového nákupního procesu, který uživatele nezahltí množstvím polí
- Přesná reprezentace produktových variant, cenotvorby a skladových zásob (správa SKU)
- Zajištění konzistence stavu košíku a katalogu při přecházení mezi jednotlivými stránkami
- Zpětná úprava designu a chování rozhraní na základě výsledků uživatelského testování
Co jsem se naučil
- Uživatelské testování odhalilo neočekávané UX nedostatky, kterých si vývojář při implementaci málokdy všimne
- Komplexní filtrování a logika produktových variant mají zásadní dopad jak na uživatelskou přívětivost, tak na správný návrh datového modelu
- Pravidelná komunikace a zpětná vazba od klienta přispěly k lepšímu výsledku mnohem více než dodatečné úpravy těsně před odevzdáním
- Pečlivá příprava datových modelů v počáteční fázi projektu předchází komplikovaným a nákladným úpravám kódu v budoucnu
Hlavní funkce
- Responzivní e-commerce rozhraní
- Vícestupňový nákupní proces (checkout)
- Administrátorský panel s přehledy a analytikou
- Podpora variant zboží a pokročilé filtrování
- Vícejazyčnost (čeština a angličtina)
- Uživatelské testování a iterativní vylepšování UX
Další projekt
Spinjitzu API
Veřejné REST API pro svět LEGO NINJAGO: postavy, série, elementy, zbraně, lokace a říše.