🤯 Parte 2: Del caos al click mental: conectar Angular con el mundo real (y sobrevivir)

Source: Dev.to

Introducción

Seguimos… y ahora sí empezó el caos de verdad 😂
En el post anterior dejé el proyecto funcionando online con login y registro, backend en Render, frontend en Netlify y base de datos en Railway. Yo feliz. Ilusa. Porque ahí es cuando empieza lo bueno de verdad: hacer que una app deje de ser “pantallas bonitas” y empiece a vivir con datos reales. De “todo mock” a “esto ya es real”.

Crear datos mock

Después de tener el login funcionando, hice algo que fue CLAVE:

• 👉 Crear datos mock para poder pintar las cards en la app.

¿Para qué? Ahí empecé a jugar fuerte con @for, @if y @switch. Por primera vez sentí que Angular no era solo teoría rara, sino que empezaba a tener sentido visual. Pero claro… eso era mentira.

Conectar Angular con el backend real

El siguiente paso era obvio:

• 👉 Dejar de usar mocks

Y aquí fue donde se me complicó la vida. Intenté hacerlo antes de que lo explicaran bien en clase (clásica yo adelantándome 😅).

• Dónde iban los servicios
• Cómo se configuraban los providers
• Qué papel jugaban los environments
• Por qué unas cosas iban en componentes y otras no

Resultado

Varias batallas con mi amigo Gregorio (ChatGPT) después… Funcionaba, pero no lo entendía del todo.

Un par de clases más adelante, el profe explicó exactamente:

• Cómo se conectan los servicios
• Cómo reemplazar los mocks
• Qué archivos tiene que tener un proyecto Angular
• Para qué sirve cada cosa

Y ahí fue cuando dije: “AHHHHH ahora sí.” Revisé mi código… porque lo había probado. Recién ahí entendí de verdad qué estaba haciendo. Esa diferencia… era enorme.

Formularios reactivos

Lo mismo me pasó con los formularios reactivos. Ya tenía cosas hechas con ayuda de la IA:

• FormGroup
• ReactiveFormsModule
• Validaciones
• Estados como touched, dirty, valid, invalid

Pero era como usar magia sin saber el hechizo, hasta que el profe lo explicó.

🧠 Click cerebral

Por eso remarco tanto algo: la IA ayuda muchísimo, una cosa es que funcione. Confiar en lo aprendido y entender para simplificar. Keep it simple (aunque yo no me hice caso al principio 😅).

Errores comunes

Mi proyecto se complicó también porque me adelanté a muchos conceptos y cometí un error clásico:

• 👉 No tener las ideas 100 % claras desde el minuto cero.

Entre páginas, componentes padre/hijo, rutas y datos que viajan de un lado a otro… es MUY fácil liarla.

Base de datos complicada

Mi base de datos estaba demasiado normalizada. Todo dependía de todo. En backend era “bonito”, pero resultó problemático.

Two‑way binding y el gran momento mágico

Cuando vimos el two‑way binding en clase, al principio no entendí NADA (real). Pero soy cabezona. Horas después… de repente…

• 👉 “ESTO es lo que necesito para crear eventos en mi proyecto.”

Tuve lío con los tipos de datos (mucho date, Angular enfadado 😅), pero lo conseguí. Cuando algo que no entiendes durante días de repente tiene sentido… es magia pura.

Estado actual de la app

Mi proyecto no está perfecto ni súper limpio, pero funciona. Y eso, para mí, es enorme.

Actualmente la app tiene:

1. Landing page

Todo esto conectado entre:

• Angular (frontend)
• FastAPI (backend)
• MySQL en Railway (base de datos)
• Autenticación JWT

Lo más real de todo este proceso

Lo más duro no fue escribir código. Fue:

• Perderme
• Romper cosas
• Pasar 2 horas arreglando algo sin saber qué toqué
• Seguir instrucciones de la IA y acabar peor que antes
• No entender por qué algo que “debería funcionar” no funciona

Pero también fue:

• Pedir ayuda
• Volver a lo simple
• Comparar con lo que enseñan los profes
• Probar, romper, rehacer

Y sobre todo:

• 👉 No rendirme.

Mi yo de hace unos meses veía esto imposible. Y eso vale oro 💛

Cómo probar la app

🚀 Ya puedes probar la app (faltan mil cosas y hay mucho que mejorar, lo sé).

Después de muchas vueltas, bugs, refactors y momentos de crisis existencial…

Frontend en Angular

Si quieres curiosear, puedes entrar con este usuario demo:

• Usuario: laura.lopez@demo.com

Enlaces útiles

• Frontend (App en vivo):
• Código Frontend:
• Código Backend: