Overview
A church management and engagement platform for House of Transformation, a church in Busia County, Kenya. The platform is built around a unified portal — there are no separate admin-only pages. Members and administrators use the same interface, with access to features gated entirely by a role-based permission system enforced on the backend.
Key Features
Public site: homepage with livestream detection, blog with per-device view tracking and likes, sermon archive, event registration with seat reservation, donation campaigns with MPESA STK push, photo gallery, volunteer applications, a five-form feedback system (sermon, service, testimony, suggestion, prayer request), and an integrated AI chatbot.
Member portal: analytics dashboard, blog/sermon/event/gallery management, livestream management, feedback moderation, volunteer application review, role and permission management, user management, real-time announcements via Server-Sent Events, and full donation/MPESA management.
Architecture
The Next.js frontend talks to a separate Node.js/Express backend over REST, backed by MongoDB for content and users and Supabase for identity. SEO-critical pages (homepage, blog, events, sermons, gallery, donate) are server-rendered on every request; the entire member portal is client-rendered and auth-gated. Real-time announcements are delivered over SSE with exponential-backoff reconnection.
Role & Permission System
Every user has a single role made up of granular permission strings (e.g. manage:events, view:analytics, read:feedback:sermon). An admin role bypasses all checks. The frontend uses these permissions only for UX — showing or hiding sidebar sections and actions — while the backend independently enforces every state-changing request.
PWA Support
The app installs as a Progressive Web App with a custom service worker (network-first, cache-fallback for GET requests only), a manifest with home-screen shortcuts to Live Stream, Sermons, Events, and Donate, and Picture-in-Picture support that persists across routes and page reloads.
Tech Stack
Frontend: Next.js (App Router), Tailwind CSS, Supabase Auth, Axios, TanStack Query, TipTap, Framer Motion, Recharts
Backend integration: Node.js/Express REST API, MongoDB, Cloudinary (media), Server-Sent Events (real-time announcements)
Author
Built by Brian Ouma (@rockstarbryant)