EN

Napptilius

Front-end engineer · 2026 · visit →

FrontEnd Portfolio

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

Context

Napptilius is a technical test made in response to the Zara Web Challenge (see RETO.md in the repository). The goal is to build a smartphone catalog with real product criteria: performance, accessibility, loading UX, maintainability and code quality.

What I did with it

  • Development of a SPA with list, product details, cart and order confirmation.
  • Real-time search (with debouncing) and filtering integration via API.
  • Implementation of color selection/storage, similar products and microinteractions.
  • Internationalization in Catalan, Spanish and English.
  • Accessibility: keyboard navigation, ARIA roles and responsive mobile-first behavior.
  • Tests with Vitest + Testing Library (27 tests) and lint/format with ESLint + Prettier.

Architecture

  • Frontend: React 19 + Vite 6 + React Router 7 + Context API with useReducer.
  • Styles: Styled Components + CSS Variables (light/dark theme).
  • Optional BFF Backend (Node/Express):
    • API proxy to hide the API key,
    • data normalization,
    • image processing (crop, resize, WebP),
    • LRU cache to improve performance.

Result

Project deployed in two scenarios:

Link