Tienda TUKU: aprende creando una tienda 3D

La Tienda TUKU es un ejemplo educativo de comercio electrónico: una vidriera 3D de balones oficiales de 29.5" donde podés rotar el producto, personalizarlo, agregarlo al carrito y cerrar la compra por WhatsApp.

No necesitás pasarela de pagos para empezar a vender: la tienda arma el pedido y lo manda listo al chat de tu negocio.

Enlaces rápidos

• Ver la versión original: tuku-tienda.ai.studio
• Código fuente en GitHub: github.com/Ssrrb/arai-mic-web
• Importarlo en Google AI Studio: copiá la URL del repo y usá la opción Import from GitHub.

Qué podés hacer en la tienda

1. Elegís una edición en el landing: Nebula, Fuego, Oro o Metal.
2. La ves en 3D, la rotás, cambiás el fondo ambiente y escuchás efectos.
3. Entrás al Personalizador y cambiás color base, color de líneas, textura [clásica, street, tech, acupresión] y texto láser.
4. La lanzás al carrito con animación, ajustás cantidades en el drawer lateral.
5. Cerrás por WhatsApp: se abre un modal que arma el mensaje con tus productos y te lleva al chat.

Todo el estado vive en React (useState en App.tsx): edición activa, vista landing o customizer, configuración custom, carrito, modales y sonido.

Con qué está construida

A diferencia del juego, la tienda no usa Firebase: es 100% frontend. El carrito vive en memoria del navegador y el pedido sale por WhatsApp.

Estructura del repositorio

arai-mic-web/
  src/
    App.tsx                  # estado global: edición, vista, carrito, modales
    components/
      CanvasContainer.tsx    # lienzo 3D WebGL del balón
      Basketball.tsx         # modelo del balón + ediciones
      Overlay.tsx            # landing y selector de ediciones
      CustomizerPage.tsx     # laboratorio de personalización
      CartDrawer.tsx         # carrito lateral
      WhatsAppCheckoutModal.tsx  # arma el pedido para WhatsApp
      BackgroundTypography.tsx   # tipografía gigante de fondo
      CartSwishEffects.tsx   # efectos de enceste
    data/editions.ts         # las 4 ediciones: precio, color, textos
    types.ts                 # CustomBallConfig, AppView, CartItem
    utils/audio.ts           # sonidos y mute
  index.html + vite.config.ts + package.json

Archivos clave para estudiar con tu IA: App.tsx, data/editions.ts, components/Basketball.tsx, components/CustomizerPage.tsx, components/WhatsAppCheckoutModal.tsx.

Recreála con AI Studio en 4 pasos

1. Importá el repo en Google AI Studio con la URL https://github.com/Ssrrb/arai-mic-web.
2. Pegale el prompt de abajo y pedile primero que te explique el recorrido de compra antes de cambiar nada.
3. Cambiá de a una cosa: nombres, precios en guaraníes, colores, textos del mensaje de WhatsApp con tu número real. Probá cada cambio con npm run dev.
4. Pedile que te agregue tus productos reales: fotos, descripciones, stock y nuevas ediciones en data/editions.ts.

Para correrla local:

npm install
npm run dev
# http://localhost:3000

También funciona con Bun:

bun install
bun run dev

Chequeo de tipos:

npm run build

Prompt listo para copiar a tu IA

Copiá y pegá esto en ChatGPT, Gemini, AI Studio o tu IA favorita:

Quiero crear mi propia tienda 3D como la Tienda TUKU para mi emprendimiento.

Repositorio original: https://github.com/Ssrrb/arai-mic-web
Demo: https://tuku-tienda.ai.studio

Actuá como mi profesor de programación. Primero explicame en simple:
1. Cómo está organizado el proyecto (App.tsx, components/CanvasContainer, Basketball, Overlay, CustomizerPage, CartDrawer, WhatsAppCheckoutModal, data/editions.ts, types.ts).
2. Cómo funciona el recorrido de compra: landing, personalizador 3D con React Three Fiber, carrito con useState y checkout que arma el mensaje de WhatsApp.
3. Cómo funciona el 3D: Canvas de WebGL, modelo del balón, colores, texturas y auto-rotación.
4. Cómo corro el proyecto local con npm install y npm run dev en puerto 3000.

Después guiame paso a paso para crear MI tienda de [contale tu rubro: ej. chipa, artesanías, remeras].
Quiero cambiar productos, precios, colores, textos y número de WhatsApp, de a un cambio por vez, explicándome qué hace cada archivo.
Al final ayudame a publicar mi versión y a agregarle mis productos reales con fotos.
Explicame todo en español simple, sin asumir que sé programar.

Ideas para hacerla tuya

• Cambiá las 4 ediciones por tus productos en data/editions.ts.
• Cambiá el precio fijo del custom (FIXED_CUSTOM_PRICE, 35.000 GS) por tu precio.
• Poné tu número de WhatsApp en WhatsAppCheckoutModal.tsx y probá que el mensaje llegue bien.
• Cambiá fondos AMBIENT_BG, tipografías y sonidos por tu marca.
• Agregá sección de envíos, promociones o Instagram.

Usá la IA como apoyo y revisá siempre el código antes de publicarlo. Con npm run build y TypeScript detectás errores antes de subir tu tienda.

Equipo ARAI

Laboratorio y recursos educativos