Napptilius

Napptilius è una prova tecnica realizzata come risposta alla Zara Web Challenge (vedi RETO.md nel repository). L'obiettivo è costruire un catalogo di smartphone con criteri reali di prodotto: prestazioni, accessibilità, UX di caricamento, manutenibilità e qualità del codice.

Cosa ho fatto

• Sviluppo di una SPA con elenco, dettagli del prodotto, carrello e conferma dell'ordine.
• Ricerca in tempo reale (con debouncing) e integrazione del filtraggio tramite API.
• Implementazione di selezione colore/archiviazione, prodotti simili e microinterazioni.
• Internazionalizzazione in catalano, spagnolo e inglese.
• Accessibilità: navigazione da tastiera, ruoli ARIA e comportamento responsive mobile-first.
• Test con Vitest + Testing Library (27 test) e lint/format con ESLint + Prettier.

Architettura

• Frontend: React 19 + Vite 6 + React Router 7 + Context API con useReducer.
• Stili: Styled Components + CSS Variables (tema chiaro/scuro).
• Backend BFF opzionale (Node/Express):
  • proxy dell'API per nascondere la chiave API,
  • normalizzazione dei dati,
  • elaborazione delle immagini (ritaglio, ridimensionamento, WebP),
  • cache LRU per migliorare le prestazioni.

Risultato

Progetto distribuito in due scenari:

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

Link

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