Template documentation

Customising this template.

A practical guide for developers and admins adapting Grace House for a different church.

Overview

Six places to change everything.

1. Church identity

Change the church name, tagline, location, address, phone, email, social links, service times, and feature toggles. Every page reads from this single file.

src/config/churchConfig.ts

2. Brand & theme

Update the oklch colour variables in :root to rebrand. Three preset themes are sketched (warm, editorial, minimal); change tokens or swap a body class to apply.

src/styles.css

3. Content data

All sermons, events, ministries, leaders, testimonials, FAQs, announcements, and giving options live as plain TypeScript arrays. Replace freely.

src/data/*.ts

4. Feature toggles

Hide major sections (sermons, events, giving, testimonials, etc.) with a single boolean. Pages adapt automatically.

src/config/churchConfig.ts → features

5. Backend integration

Every backend integration point — form submissions, sermon media, payment, calendar, mailing list — is flagged with a comment. Wire to a CMS or APIs when ready.

Search the codebase for // BACKEND_READY

6. Hero video & carousels

Set media.heroVideoUrl to any YouTube, Vimeo, or .mp4 link — the homepage hero shows a 'Watch our story' pop-out player. Set to an empty string to hide. Sermon rows use a peeking carousel (PeekingCarousel.tsx) reusable for any list.

src/config/churchConfig.ts → media

7. Hero variant

Switch hero.variant between 'classic' (split image + copy) and 'swiper' (Antigravity-style swipeable card carousel). Edit hero.slides to author your own — each slide can be authored or auto-pulled from latest sermon / next event.

src/config/churchConfig.ts → hero

8. Adapt for any church

Pentecostal, Baptist, Anglican, Catholic, evangelical, multisite — the layouts are intentionally flexible. Swap content, tone, and palette and the structure holds.

—

Routing recap

All pages live under src/routes/ using TanStack file-based routing. To add a page (e.g. /podcast), create src/routes/podcast.tsx and add it to src/config/navigation.ts.

For more, see README_TEMPLATE.md at the project root.