Todo proyecto tiene la misma forma
Cambian los nombres, no la lógica. Un proyecto generado por IA casi siempre separa: lo que se ve (frontend), lo que se procesa (backend/lógica), lo que se guarda (datos), lo que se ajusta (configuración) y lo que se pide prestado (dependencias). Si sabes en qué cajón vive cada comportamiento, señalas la ruta correcta en vez de describir síntomas.
[Los cinco cajones del proyecto]
Esta actividad interactiva ('Explicacion visual') requiere el motor completo de Lumbre. El contenido estatico se muestra arriba; para la experiencia interactiva, visita la version online de este objeto.
Un mapa real, leído en voz alta
mi-crm/\n├── public/ # lo que el navegador descarga (html, css, js)\n│ └── index.html\n├── src/\n│ ├── routes/ # backend: QUÉ endpoints existen (GET /contactos)\n│ ├── services/ # lógica de negocio: CÓMO se valida y calcula\n│ └── models/ # datos: QUÉ forma tienen contacto, empresa, venta\n├── config/ # parámetros: a DÓNDE se conecta (base de datos, APIs)\n├── .env # SECRETOS: credenciales que NUNCA se suben al repo\n├── package.json # dependencias: QUÉ paquetes prestados se usan\n└── README.md # el manual: para qué sirve y cómo arrancaPara reforzar
Las capas de una aplicación: frontend, backend y datos
OA publicado que explica las capas conceptuales. Aquí las bajamos al disco: cada capa es una carpeta que puedes señalar con el dedo.
Dónde vive cada cambio
| Quieres… | Cajón correcto | No tocarías… |
|---|---|---|
| Cambiar un color del botón | frontend (public/src) | los models ni el .env |
| Agregar un campo «empresa» al contacto | datos (models) + backend (routes) | los estilos |
| Mover la app a otra base de datos | configuración (config / .env) | la lógica de services |
| Cambiar el mensaje de error al guardar | lógica (services) | las dependencias |
Prueba
Quieres que el teléfono se guarde sin espacios ni guiones. ¿En qué cajón debe vivir el cambio?
Un archivo .env suele contener contraseñas y claves, por eso no debe subirse al repositorio ni compartirse con la IA sin limpiar.
Detecta el cambio fuera de lugar
Pediste «validar que el email tenga formato correcto». La IA tocó cuatro puntos. Señala el cambio mal ubicado que no aporta la validación:
- En services/ agrega una funcion esEmailValido(texto).
- En public/styles.css cambia el color del boton a azul.
- En routes/ usa esEmailValido antes de guardar y devuelve 400 si falla.
- En models/ marca el campo email como obligatorio.
Identifica la linea con error.
Pide a la IA el árbol de carpetas de tu proyecto (solo nombres, no contenido). Asigna con una palabra qué hace cada carpeta. La próxima orden que des, señala el cajón exacto.