Lienzo Abierto: una galería de imágenes para aprender, adaptar y hacer tuya

Hay proyectos que se entienden mejor al abrirlos que al leer una lista de tecnologías. Una galería es uno de ellos: ves una imagen, pruebas una búsqueda, guardas una favorita y enseguida aparecen preguntas interesantes. ¿Dónde se guarda ese favorito? ¿Qué ocurre al recargar? ¿Y si quiero añadir una foto mía?

He preparado Lienzo Abierto para explorar esas preguntas con una aplicación pequeña, visual y fácil de poner en marcha. El código está disponible en GitHub, con licencia MIT, imágenes de ejemplo y documentación.

Captura real de la aplicación local. El paisaje es una ilustración original generada con IA.

Una colección que puedes tocar

La portada incluye cuatro ilustraciones: un faro, un bosque con un zorro, un pueblo mediterráneo y un jardín entre las estrellas. Comparten colores y un estilo de papel recortado. No necesitas buscar imágenes por internet para probar el proyecto.

Puedes filtrar por categoría, buscar por texto y ordenar. Cada tarjeta tiene un botón para guardar la imagen como favorita. Al abrirla, aparece una vista ampliada con su descripción y la opción de descargarla. Escape cierra la vista y te devuelve a la colección.

También puedes añadir una imagen propia. El formulario admite JPG, PNG y WebP de hasta 10 MB; el navegador comprueba que puede decodificarla, la reduce y la guarda en IndexedDB. No se envía a un servidor. En esta edición hay un límite de veinte imágenes locales, pensado para mantener manejable el ejemplo.

Ponerla en marcha

Descarga el ZIP desde Code → Download ZIP en GitHub. Descomprímelo y abre la carpeta en un editor. Para esta parte necesitas Node.js y npm; el README recomienda la rama 22 e incluye .nvmrc.

npm ci
npm run dev

Abre http://127.0.0.1:3000. No hay claves que rellenar ni una cuenta que crear.

Prueba este recorrido:

1. Pulsa Arquitectura: verás el pueblo mediterráneo.
2. Vuelve a Todas y busca «bosque».
3. Guarda el faro como favorito y recarga la página.
4. Abre Favoritas y comprueba que sigue ahí.
5. Añade una imagen propia, cierra el navegador y vuelve al mismo origen.
6. Descarga lo que quieras conservar antes de borrar los datos del sitio.

El último punto importa. El almacenamiento pertenece a ese navegador y a esa dirección. No hay sincronización entre dispositivos. Si borras los datos del sitio, también borras lo que habías añadido.

Lo interesante está debajo de la imagen

Next.js y React se encargan de la interfaz. El catálogo inicial está en src/lib/catalog.ts; las operaciones de guardado local, en src/lib/local-gallery.ts. Son dos buenos lugares para empezar a leer el código.

Una ampliación asequible sería añadir etiquetas. Primero puedes incorporarlas al catálogo y usarlas en la búsqueda. Después, llevarlas al formulario. No hace falta empezar por una base de datos remota para aprender a organizar la información.

Si te ayudas de una IA, prueba este encargo:

Lee este proyecto y explícame cómo se guarda una imagen local.
Después propón el cambio mínimo para añadir etiquetas a las imágenes.
Mantén los archivos en el navegador, conserva la navegación con teclado
y no añadas servicios, cuentas ni dependencias sin explicar para qué sirven.

Qué he comprobado

La prueba local recorre filtros, búsqueda, favoritos después de recargar, apertura y cierre de la vista ampliada, descarga e importación y borrado en IndexedDB. También he revisado la portada a 1440 y 390 píxeles, sin imágenes rotas ni desbordamiento horizontal. Son pruebas de navegador, no una validación en todos los móviles.

El repositorio incluye el registro de esas comprobaciones y las limitaciones. Las ilustraciones se distribuyen con el ejemplo bajo los términos de su licencia, en la medida en que existan derechos aplicables; son recursos generados con IA y no se garantiza exclusividad.

Abre Lienzo Abierto en GitHub, prueba la colección y cambia una pieza. Una galería también puede ser una buena forma de empezar a construir.