Bautista Misionera
★ DestacadoSitio web institucional con integración Ekleria
La congregación en línea: el pastor publica en Ekleria y el sitio se actualiza solo, sin CMS adicional.
# Resumen
bautistamisionera.com es el sitio institucional de la Iglesia Bautista Misionera de Santa Eulalia. Construido con Angular (standalone, OnPush, Signals) y renderizado en servidor con Angular SSR + prerendering de rutas estáticas para SEO óptimo. Un BFF propio (Node/Express) actúa como única puerta de entrada a la plataforma Ekleria —el SaaS de gestión de iglesias también desarrollado por FaberIT—, aplicando el patrón Gateway/Port para que ningún componente Angular llame directamente a APIs externas. El equipo pastoral gestiona eventos, noticias y ministerios desde el panel Ekleria que ya conoce; el sitio se actualiza sin tocar código.
! El problema
La iglesia necesitaba presencia digital actualizable sin personal técnico. Los CMS genéricos duplicaban el trabajo: el secretario ya registraba todo en Ekleria y luego lo repetía manualmente en el sitio. Además, un sitio puramente estático no garantizaba SEO sin SSR.
✓ La solución
Angular SSR con prerendering de rutas estáticas resuelve el SEO sin sacrificar interactividad. Un BFF intermedio consume Ekleria y expone una API limpia al frontend, manteniendo la UI desacoplada de cualquier detalle de integración. El pastor publica en Ekleria y el sitio refleja el cambio sin intervención técnica.
# Características
Patrón Gateway/Port con Ekleria
Los componentes Angular inyectan EkleriaGateway (interface + token), nunca HttpClient directamente. El BFF es el único que habla con Ekleria, manteniendo la UI completamente desacoplada.
Angular SSR + prerendering
Rutas estáticas prerenderizadas en build; rutas dinámicas con SSR. SEO óptimo con metadatos y JSON-LD por página sin sacrificar interactividad en cliente.
BFF como capa de integración
Un servidor Node/Express intermedio agrega, transforma y cachea los datos de Ekleria antes de servirlos al frontend, protegiendo la UI de cambios en la API upstream.
Design tokens SCSS
Paleta institucional completa en tokens CSS personalizados: azul tinta, marfil y latón con reglas de uso estrictas para mantener coherencia visual.
Componentes standalone con OnPush + Signals
Toda la UI usa ChangeDetectionStrategy.OnPush y estado reactivo con signal()/computed(), sin Subjects ni BehaviorSubjects.
Contenido 100 % desde Ekleria
Eventos, cultos, ministerios y noticias se gestionan en el panel Ekleria; el sitio los refleja sin depender de un CMS adicional ni intervención técnica.
# Arquitectura
La arquitectura sigue el patrón Gateway/Port: los componentes Angular nunca hablan con Ekleria directamente, sino a través de un token de inyección (EkleriaGateway) cuya implementación real (HttpEkleriaGateway) llama al BFF propio. El BFF (Node/Express) es la única capa que se comunica con las APIs de la plataforma Ekleria, agrega y transforma los datos, y los expone como una API REST limpia al frontend. Angular SSR prerenderiza las rutas estáticas en build y sirve SSR para el resto, garantizando SEO completo.
# Stack técnico
# Aprendizajes
- → El patrón Gateway/Port no es burocracia: cuando Ekleria cambia su API, solo se toca la implementación del gateway, ningún componente de UI.
- → Angular SSR + prerendering de rutas estáticas es la combinación perfecta para sitios institucionales: SEO sin sacrificar la reactividad de Signals.
- → El BFF como capa intermedia protege al frontend de los detalles de cada integración y permite cachear, transformar y versionar sin afectar la UI.
- → El diseño con tokens SCSS y reglas de uso explícitas evita que el color institucional se desvíe con el tiempo, incluso en equipos pequeños.
# Roadmap
¿Te sirve para tu negocio?
Esta solución se puede adaptar a tu organización. Comparte el proyecto o escríbeme para conversarlo.