ES

Napptilius

Front-end engineer · 2026 · visitar →

FrontEnd Portfolio

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

Contexto

Napptilius es una prueba técnica realizada como respuesta al Zara Web Challenge (ver RETO.md en el repositorio). El objetivo es construir un catálogo de smartphones con criterios reales de producto: rendimiento, accesibilidad, UX de carga, mantenibilidad y calidad de código.

Qué hice

  • Desarrollo de una SPA con listado, detalle de producto, carrito y confirmación de pedido.
  • Búsqueda en tiempo real (con debouncing) e integración de filtrado vía API.
  • Implementación de selección de color/almacenamiento, productos similares e microinteracciones.
  • Internacionalización en catalán, castellano e inglés.
  • Accesibilidad: navegación con teclado, roles ARIA y comportamiento responsive mobile-first.
  • Tests con Vitest + Testing Library (27 tests) y lint/format con ESLint + Prettier.

Arquitectura

  • Frontend: React 19 + Vite 6 + React Router 7 + Context API con useReducer.
  • Estilos: Styled Components + CSS Variables (tema claro/oscuro).
  • Backend BFF opcional (Node/Express):
    • proxy de la API para ocultar la API key,
    • normalización de datos,
    • procesado de imágenes (recorte, redimensión, WebP),
    • cache LRU para mejorar rendimiento.

Resultado

Proyecto desplegado en dos escenarios:

Enlace