Dominion City Church
A digital home for Dominion City Lagos (Ajah) — sermons, events, ministries, giving with Stripe and Paystack, prayer requests, and a testimony community in one React app.
Overview
The product
Dominion City Church is a full church web platform for Dominion City Lagos, Ajah. The homepage leads with a hero slider and a living marquee of service moments, then branches into everything a congregation needs: about, ministries, sermons, events, books, and contact — plus a giving page that accepts donations through Stripe and Paystack. A prayer request form and a testimony forum turn the site from a brochure into a community, and an admin terminal keeps the whole thing manageable. Built on React 18 with an MUI design system, Firebase data, and Zustand state, it deploys continuously to Firebase Hosting.
9 designed surfaces
Pages
Stripe + Paystack
Giving
Prayer + Testimonies
Community
Firebase Hosting
Deploy
The problem
A growing church needed a digital front door
A church community of Dominion City's size needs more than a static page — members want sermons on demand, events and ministries they can browse, a way to give securely, and channels to ask for prayer or share testimonies. Without a platform, all of that lived across social media and word of mouth.
- No single place for sermons, events, ministries, and books
- Giving relied on manual channels — no secure, modern payment flow
- Prayer requests and testimonies had no structured, community-facing home
The solution
One platform for worship, community, and giving
I built a React 18 app where every ministry of the church has a designed surface: a hero slider and marquee grid set the tone, sermons and events stay current, ministries and books are browsable, and a dedicated Give page handles donations with both Stripe and Paystack so every member can give the way they prefer. Prayer requests and testimonies flow through forms into Firebase, and an admin terminal lets the church team curate and respond to it all.
- Full page set — home, about, ministries, sermons, events, books, give, contact, and admin
- Donations via Stripe and Paystack with a purpose-built giving flow
- Prayer requests and a testimony forum powered by Firebase, with an admin terminal
Architecture
The system behind Dominion City Church
A classic SPA split: React Router pages composed from reusable sections, Firebase as the data layer for community content, and utility layers for payments, email, and analytics.
- 01
App Shell
React 18 · React RouterSPA routing across home, ministries, sermons, events, give, and admin.
- 02
Design System
MUI v5 · EmotionA consistent, themeable component layer with light and dark support.
- 03
Home Experience
Hero slider · Marquee gridCinematic first impression with animated service imagery and counts.
- 04
Community Data
FirebasePrayer requests, testimonies, sermons, and events backed by Firestore.
- 05
Giving
Stripe · PaystackSecure donation flows with both global and local payment rails.
- 06
State & UX
Zustand · TanStack QueryShared state and server data with toast and loading feedback everywhere.
Tech stack
Tools that earned their place
Frontend
- React 18
- React Router
- Framer Motion
UI
- MUI v5
- Emotion
- Lucide icons
Data
- Firebase
- TanStack Query
- Axios
Payments
- Stripe
- Paystack
State
- Zustand
Reach
- EmailJS
- Newsletter
- Analytics
Features
What it does, and why it matters
Sermons & media
A browsable sermons section with video playback and search so the Word is never missed.
Events calendar
Upcoming church events surfaced on the homepage and a dedicated events page.
Ministries & books
Every ministry department gets its own surface, and authored books are showcased.
Give page
Donations accepted through Stripe and Paystack — members give with global cards or local rails.
Prayer requests
A structured prayer request form that flows straight into the church's Firebase data.
Testimony forum
A community forum for sharing testimonies, with an admin terminal to curate responses.
Challenges
What nearly broke the system
Payments for a congregation
Members give in different ways — some with international cards, most through Nigerian rails. I integrated both Stripe and Paystack so no one is turned away at the moment of giving.
Keeping the home page alive
A church homepage goes stale fast. I built hero, marquee, sermon, and event sections to read from data instead of hard-coded copy, so the front page stays current as the church moves.
Community features need moderation
Public testimonies are powerful — and need a steward. I added an admin terminal so the team can review, curate, and respond to community content instead of letting it run wild.
Lessons learned
What shipping taught me
A church site is a product: sermons, giving, prayer, and testimony each deserve a designed surface, not a blog post.
Local payment rails belong in every giving flow — Paystack and Stripe side by side means nobody gets turned away.
Community features only work when there's a trusted human in the loop — admin surfaces are product features, not afterthoughts.
Impact
Why this actually matters
Dominion City's website turned the church's digital presence from a placeholder into a living platform — sermons reach beyond the sanctuary, giving flows securely on local and global rails, and prayer requests and testimonies close the loop between the site and the church community.
- Every ministry — sermons, events, books, giving — now has a first-class digital home
- Stripe + Paystack giving means members can sow from anywhere, in any currency
- Prayer and testimony flows keep the congregation connected between services
Gallery
Inside the product
Hero & marquee
Cinematic slider and service imagery that set the church's tone.
Giving flow
Secure donations through Stripe and Paystack on a dedicated page.
Testimony forum
Community-shared testimonies, curated from an admin terminal.