Bautista Misionera
★ FeaturedInstitutional website with Ekleria integration
The congregation online: the pastor publishes in Ekleria and the site updates itself, no extra CMS needed.
# Overview
bautistamisionera.com is the institutional site for Iglesia Bautista Misionera de Santa Eulalia. Built with Angular (standalone, OnPush, Signals) and server-rendered via Angular SSR + static route prerendering for optimal SEO. A dedicated BFF (Node/Express) acts as the sole entry point to the Ekleria platform —the church management SaaS also built by FaberIT—, applying the Gateway/Port pattern so no Angular component ever calls external APIs directly. The pastoral team manages events, news and ministries from the Ekleria panel they already know; the site updates without touching code.
! The problem
The church needed an updatable digital presence without technical staff. Generic CMS tools doubled the work: the secretary already logged everything in Ekleria and then repeated it manually on the site. Also, a purely static site wouldn't guarantee SEO without SSR.
✓ The solution
Angular SSR with static route prerendering solves SEO without sacrificing interactivity. An intermediary BFF consumes Ekleria and exposes a clean API to the frontend, keeping the UI decoupled from any integration detail. The pastor publishes in Ekleria and the site reflects the change with no technical intervention.
# Features
Gateway/Port pattern with Ekleria
Angular components inject EkleriaGateway (interface + token), never HttpClient directly. The BFF is the only layer that talks to Ekleria, keeping the UI fully decoupled.
Angular SSR + prerendering
Static routes prerendered at build time; dynamic routes with SSR. Optimal SEO with per-page metadata and JSON-LD without sacrificing client-side interactivity.
BFF as integration layer
An intermediary Node/Express server aggregates, transforms and caches Ekleria data before serving it to the frontend, shielding the UI from upstream API changes.
SCSS design tokens
Full institutional palette in custom CSS tokens: ink blue, ivory and brass with strict usage rules to maintain visual consistency.
Standalone OnPush components + Signals
All UI uses ChangeDetectionStrategy.OnPush and reactive state via signal()/computed(), with no Subjects or BehaviorSubjects.
100% Ekleria-driven content
Events, worship services, ministries and news are managed in the Ekleria panel; the site reflects them with no extra CMS or technical intervention.
# Architecture
The architecture follows the Gateway/Port pattern: Angular components never talk to Ekleria directly, only through an injection token (EkleriaGateway) whose real implementation (HttpEkleriaGateway) calls the internal BFF. The BFF (Node/Express) is the only layer that communicates with the Ekleria platform APIs, aggregates and transforms data, and exposes it as a clean REST API to the frontend. Angular SSR prerenders static routes at build time and serves SSR for the rest, ensuring full SEO.
# Tech stack
# Learnings
- → The Gateway/Port pattern isn't bureaucracy: when Ekleria changes its API, only the gateway implementation changes — no UI component is touched.
- → Angular SSR + static route prerendering is the perfect combo for institutional sites: SEO without sacrificing Signals reactivity.
- → The BFF as an intermediary layer shields the frontend from each integration's details and allows caching, transformation and versioning without affecting the UI.
- → SCSS design tokens with explicit usage rules prevent the institutional palette from drifting over time, even in small teams.
# Roadmap
Useful for your business?
This solution can be adapted to your organization. Share the project or reach out to discuss it.