4. 🌼 Vestir el altar: hazlo tuyo

Veinticinco minutos para que tu altar deje de parecerse al de los demás.

Vístelo

Sube tus propias imágenes

El arte por default lo dibuja el propio código, en SVG. Pero puedes subir tus fotos, y ahí es donde entra S3.

💡 Cómo llega tu foto a S3

Tu navegador no le manda la foto a la Lambda. Le pide a la API una URL firmada, y con esa URL sube el archivo directo a S3.

Así la foto no pasa por tu backend, y por eso puedes subir imágenes grandes sin que la Lambda se quede sin memoria. El bucket sigue siendo privado: para verla, el altar pide otra URL firmada, de lectura.

La canción

💡 Por qué solo el embed

El embed oficial evita que tengas que implementar OAuth o registrar una app de Spotify para mostrar la canción. Spotify controla la reproducción y puede cambiar lo que permite según el navegador y la sesión de quien visita.

El Web Playback SDK es otra cosa: requiere una cuenta Premium, un access token y una app registrada. Consulta la documentación oficial de Spotify Embeds y del Web Playback SDK.

Un tipo de elemento nuevo

🤖 Pídele al agente la tarea 2

Agrega un tipo de elemento que no exista, con su forma de dibujarse. Y que no sea genérico: que sea algo que tenga sentido para tu altar. Un control de Nintendo, una taza de café, la croqueta de tu perro.

Como Kiro necesita saber qué tipo quieres, pídeselo en el chat en vez de usar el botón Start task. Cambia el tipo por el tuyo:

Haz la tarea 2 de .kiro/specs/ofrenda/tasks.md. El tipo nuevo es
un control de Nintendo.

Fíjate en algo: esa tarea no toca el backend. Ni la tabla, ni los handlers, ni los permisos. Solo web/src/catalogo/elementos.js y web/src/catalogo/arte.js. Eso es porque el backend guarda el tipo como texto y no opina sobre cuáles existen.

Ahora hazlo que no se parezca al de nadie

Hasta aquí todos los altares se ven parecidos: mismo morado, mismo papel picado y mismos dibujos. Eso es porque el starter es un punto de partida, no un producto terminado. Es tu código y lo puedes cambiar.

En el módulo 5 vamos a recorrer altares en la pantalla grande. Vale la pena que el tuyo se reconozca.

Estas ideas solo cambian el frontend y no tocan el backend. Abre la que te llame y copia su prompt:

Cambia la paleta de web/src/estilos.css a tonos de
noche: azul profundo de fondo, plata para el texto y
un acento turquesa. Deja los nombres de las
variables como están.

En web/src/catalogo/adornos.js, cambia el picado de
las banderas por un patron de corazones y cambia
los colores a rosa, morado y blanco.

Haz que el dibujo de las velas parpadee suave con
una animacion de CSS, solo las velas. Respeta
prefers-reduced-motion.

Cambia la fuente del titulo por una de Google
Fonts que se vea de cartel de feria, y cargala
desde el index.html.

Debajo del titulo, agrega una linea que diga a
quien va dedicado el altar, con un campo que se
guarde igual que el nombre de quien lo arma.

🤖 Cómo pedírselo para que salga bien

Dile qué archivo tocar. El agente adivina bastante bien, pero si le dices web/src/estilos.css no se va a poner a buscar.

Y revisa el diff antes de aceptar, igual que en el módulo 3. Si tocó algo de web/src/datos/ o de lambda/, dile que no: ahí no era.

⚠️ Lo único que no toques

web/src/datos/almacen.js, que es el que habla con tu API. Acabas de hacerlo funcionar.

Publica

git add .
git commit -m "Mi altar"
git push origin main

npm run verify 4 https://main.xxxxx.amplifyapp.com

Si te atoraste

Si un cambio rompió tu altar o un checkpoint no pasa, pégale el error a Kiro y dile qué le pediste antes. Si la página se ve mal pero no hay error, descríbele lo que ves: “el altar se quedó en blanco después de cambiar la paleta”. Si la respuesta no te sirve, cambia de modelo en el selector del chat y vuelve a preguntar.

Si no se resuelve en un par de minutos, levanta la mano. Y si el tiempo se acaba, la rama de rescate del módulo 4 está en Comandos del repo.