CA

Napptilius

Front-end engineer · 2026 · visita →

FrontEnd Portfolio

#bff #javascript #Node.js #NPM #prova-tecnica #react #styled-components #testing #vite

Context

Napptilius és una prova tècnica feta com a resposta al Zara Web Challenge (veure RETO.md al repositori). L'objectiu és construir un catàleg de smartphones amb criteris reals de producte: rendiment, accessibilitat, UX de càrrega, mantenibilitat i qualitat de codi.

Què hi vaig fer

  • Desenvolupament d'una SPA amb llistat, detall de producte, carret i confirmació de comanda.
  • Cerca en temps real (amb debouncing) i integració de filtratge via API.
  • Implementació de selecció de color/emmagatzematge, productes similars i microinteraccions.
  • Internacionalització en català, castellà i anglès.
  • Accessibilitat: navegació amb teclat, rols ARIA i comportament responsive mobile-first.
  • Tests amb Vitest + Testing Library (27 tests) i lint/format amb ESLint + Prettier.

Arquitectura

  • Frontend: React 19 + Vite 6 + React Router 7 + Context API amb useReducer.
  • Estils: Styled Components + CSS Variables (tema clar/fosc).
  • Backend BFF opcional (Node/Express):
    • proxy de l'API per ocultar l'API key,
    • normalització de dades,
    • processat d'imatges (retall, resize, WebP),
    • cache LRU per millorar rendiment.

Resultat

Projecte desplegat en dos escenaris:

Enllaç