Adaptarlo a tu producto

Cambiar marca, colores, textos e imagenes sin tocar el nucleo del codigo.

Convertir ApisKit en tu producto es cambiar un conjunto pequeno y bien definido de cosas. El nucleo (src/core), el enganche con el framework y la logica de negocio no se tocan.

1. La identidad, con un comando

npm run init-product -- \
  --name "Acme" --slug acme --company "Acme Inc" \
  --company-url https://acme.com --support-email soporte@acme.com \
  --base-url https://app.acme.com

Reescribe src/config/product.ts (la fuente unica), el nombre en package.json y la URL en .env.example.

Puedes ejecutarlo sin argumentos para que te vaya preguntando, o con --dry-run para ver que cambiaria sin escribir nada.

Como todo bebe de product.ts, ese comando cambia de golpe el SEO, los correos, los datos estructurados, la cabecera, el pie y los textos traducidos.

2. Los colores

Estan en src/app/globals.css, como propiedades CSS, definidas para tema claro y oscuro. Toda la interfaz se pinta con esos tokens: no hay ni un color escrito a mano en los componentes, y hay un verificador que lo impide.

Cambiar la marca visual es cambiar esos valores. No hay que ir componente por componente.

3. Los textos

Viven en src/locales/es/ y src/locales/en/, un fichero por espacio (landing, pricing, profile, admin, support...).

Dos reglas:

  • Usa los distintivos {brand}, {company}, {supportEmail} y {baseUrl} en vez de escribir tu nombre a mano. Se resuelven desde product.ts, asi que cuando cambie algo no se queda un texto viejo por ahi.
  • Manten espanol e ingles simetricos. Cada clave tiene que existir en los dos. npm run verify:i18n lo comprueba y ademas caza un t() que apunte a una clave que ya no existe, que si no saldria la clave cruda en pantalla.

4. Navegacion y categorias de soporte

  • Etiquetas del menu: common.nav.* y common.sidebar.* en los ficheros de idioma.
  • Categorias de soporte: el tipo SupportCategory en src/core/entities/SupportTicket.ts, las respuestas automaticas en la ruta de tickets, y las etiquetas category.* en support.json. Renombra y anade las que encajen con tu producto.

5. Precios y creditos

  • Nombres, precios y ventajas de los packs: pricing.json, en los dos idiomas.
  • Identificadores de precio de Stripe: conecta tus productos y pon las claves.
  • El modelo de "esta accion cuesta N creditos" es generico: ajusta las cantidades y como lo llamas.

6. La documentacion

No se toca aqui. Tu documentacion se escribe desde el panel, en los dos idiomas, y se guarda en la base de datos.

Lo unico que quizas quieras cambiar es la palabra de la direccion. Las paginas van bajo /documentacion/... en espanol y /en/documentation/... en ingles. Si tu producto quiere otras palabras, aparecen en cuatro sitios y los cuatro tienen que coincidir: la reescritura en next.config.js, hrefDeDoc en src/lib/docs/tree.ts, y las dos vistas previas del panel (DocFields.tsx y DocsList.tsx).

7. Los textos legales

Los que vienen son ejemplos, no asesoramiento juridico, y cada pagina lo dice con un aviso visible. Tienes una guia entera en la pagina de Guia legal.

8. Las imagenes

Sustituye en public/images/:

  • logo/, tu logotipo, al que apunta product.ts.
  • og/, las imagenes que se ven al compartir en redes.

Y en la raiz de public/, los favicons y los iconos de aplicacion, mas el nombre en site.webmanifest.

Los graficos de la portada y de precios son iconos vectoriales, asi que no hay ilustraciones que redibujar.

9. Comprueba

npm run verify:all      # la puerta del dia a dia
npm run verify:release  # la completa, con pruebas de navegador
npm run build

Lo que no deberias necesitar tocar

src/core/, es decir el dominio y los puertos.

Si adaptar tu producto te obliga a cambiar algo ahi, tratalo como un fallo de la plantilla y arreglalo como tal, no como un parche para tu caso. Es lo que distingue una base que aguanta cinco anos de una que se pudre en seis meses.