Napptilius

Napptilius är ett tekniskt prov gjort som svar på Zara Web Challenge (se RETO.md i repositoryt). Målet är att bygga en katalog över smartphones med verkliga produktkriteria: prestanda, tillgänglighet, laddnings-UX, underhållbarhet och kodkvalitet.

Vad jag gjorde

• Utveckling av en SPA med produktlista, produktdetaljer, varukorg och orderbekräftelse.
• Realtidssökning (med debouncing) och filterintegrering via API.
• Implementering av färg-/lagringsval, liknande produkter och mikrointeraktioner.
• Internationalisering på katalanska, spanska och engelska.
• Tillgänglighet: tangentbordsnavigering, ARIA-roller och responsiv mobilförsta-design.
• Tester med Vitest + Testing Library (27 tester) och lint/format med ESLint + Prettier.

Arkitektur

• Frontend: React 19 + Vite 6 + React Router 7 + Context API med useReducer.
• Stilar: Styled Components + CSS-variabler (ljust/mörkt tema).
• Valfritt BFF-backend (Node/Express):
  • proxy för API:t för att dölja API-nyckeln,
  • datanormalisering,
  • bildbehandling (beskärning, storleksändring, WebP),
  • LRU-cache för bättre prestanda.

Resultat

Projekt distribuerat i två scenarier:

• Fullstack (frontend + backend): https://napptilius.onrender.com/
• Endast frontend (GitHub Pages): https://xarop.github.io/napptilius/

Länk

• Repositori: https://github.com/xarop/napptilius