Skip to main content

Side Projects

2026

New Hope Community Church

New Hope Community Church

Come as you are: a South San Francisco church

View Live

Overview

New Hope Community Church is a Jesus-centered church in South San Francisco, and this is its website. It gives visitors service times, the address and parking notes, an events calendar, recent sermons and podcast episodes, a Give page, and a prayer request option. The earlier hand-edited static site was rebuilt as a Next.js app with its content held in Sanity, so non-technical staff can update pages, events and leaders without a developer. The visual design carried over from the static site: large sans-serif headlines with italic serif emphasis, color-blocked sections and hairline dividers.

Home page section on a cream background with a large headline reading 'Rooted in Jesus. Open to everyone.', an italic serif Bible verse beneath it, and a short paragraph with a 'Read our story' link on the right
Headlines pair a large sans-serif with an italic serif accent, and several sections carry a Bible verse set in the same italic serif.
Blue home page section with three cards for Sunday Service, Wednesday Bible Study and YouthCon showing address, times and parking notes, above an Upcoming Events list with poster thumbnails and a See all events link
Service times, address and parking sit in one scannable row of cards, with the next events directly below.
Events page list grouped by month, each row showing a large date, a poster, a category tag, the event title and details, and Register and Add to calendar buttons
Upcoming events are grouped by month, each with a large date, poster, category tag, and Register and Add to Calendar actions.
About page section titled 'What we believe' with a numbered list of beliefs, titles on the left and one-line descriptions on the right, separated by hairline rules
A numbered, hairline-ruled list keeps long statements of belief easy to scan, with monospace labels and numerals.

Who We Designed For

People in and around South San Francisco looking for a church, and the church staff who keep the site current

  • First-time visitors

    People deciding whether to visit, who need service times, the address, parking and a welcoming first impression

  • Regular attendees

    People who check upcoming events, catch up on a missed Sunday, or listen to sermons and podcast episodes

  • Church staff

    Non-technical editors who update pages, events, leaders and podcast episodes through the CMS

Tech Stack

On Mobile

Home page on a phone: a photo of the church building front with the headline 'Come as you are.', the mission statement and a 'Join us on Sunday' button, under a header with Give and Menu buttons
On phones the header collapses to Give and Menu, and the hero keeps the headline and a single call to action.
About page on a phone: the headline 'A place of hope and belonging.' above the story and mission text in a single column
The two-column About layout becomes one reading column with the headline above the text.
Events page on a phone: a YouthCon card with the date over its poster, a Students tag, event details, and Register and Add to calendar buttons side by side
Each event becomes a card with the date over the poster and the two actions side by side.

Process

  1. Foundation: Home and Events in Next.jsSeptember 30, 2026

    The static site was moved into a legacy folder as the visual reference, and the Home and Events pages were rebuilt as Next.js components with content hard-coded from the old pages and checked for visual parity. Playwright smoke tests covered the home page, events page, event dialog and mobile menu.

  2. CMS: content moves into SanitySeptember 30 to October 1, 2026

    Added content types for site settings, the home and events pages and events, an editor interface embedded in the app, queries that map CMS content to the site's types, a one-time import of the original content, and a publish hook so changes appear without a rebuild. Links, email addresses and map URLs are re-checked on read, and buttons with no safe target are hidden.

  3. New pages: About, Watch & Listen, Give, ConnectOctober 1, 2026

    Added the About page (story, beliefs, values, what to expect, leaders), a Watch & Listen page with recent YouTube videos and podcast episodes, and the Give and Connect pages. Shareable event pages with Event structured data were added, followed by accessibility polish on the video, prayer, copy-link and list components.

  4. Content and layout updatesNovember 3, 2026

    Later commits updated the leaders listing and photos, removed the service-times strip from the About, Events and Connect heroes, and set the home page to show 12 recent YouTube videos with a higher-resolution hero thumbnail.

AI Collaboration

Tools

Claude

Approach

Claude is credited as co-author on every commit. The repository also holds a written design spec, an implementation plan for each build phase, and notes recording decisions and open items after each phase.

Features

Visiting and events

  1. Service times, address and parking notes for the Sunday and Wednesday gatherings on the home page and Events page
  2. Events page with search and category filters (Weekly, Community, Students, Conferences)
  3. Weekly cards show the next occurrence of recurring gatherings, with Directions and Add to Calendar buttons
  4. Upcoming events grouped by month, each with a poster, category tag, and Register and Add to Calendar actions
  5. A Prayer Request dialog on every page; sending opens the visitor's email app addressed to the church

Watch and listen

  1. Recent sermons listed on the home page from the church's YouTube channel, each linking to YouTube
  2. Latest service video loads as click-to-play, so the player is not fetched until it is pressed
  3. Podcast page lists episodes with embedded audio players and a Subscribe on Apple Podcasts button
  4. If YouTube does not respond, the page shows a Watch on YouTube link instead of videos
  5. Podcast embeds are built only from recognized hosts (Spotify, Apple Podcasts, Buzzsprout); other links fall back to a Listen button

Editing and publishing

  1. Staff edit pages, events, leaders and podcast episodes in an editor embedded in the site
  2. Published changes appear within seconds through a publish hook, without a rebuild
  3. The original static site's content was imported into the CMS, so editing started from existing copy
  4. Events that have ended are hidden automatically
  5. Links, email addresses and map URLs are re-checked on read, and buttons with no safe target are hidden

Design and quality

  1. Four-color palette (ink, cream, blue, orange) with DM Sans, DM Mono labels and Playfair Display italic accents
  2. Header with Prayer Request and Give buttons collapses to Give and Menu on phones; Give is kept out of the main menu
  3. Accessibility work in the commit history, including focus returning to the menu button when Escape closes the mobile menu
  4. Vitest unit tests and Playwright end-to-end tests
  5. End-to-end tests run against fixture content with a pinned clock, so date-based content does not expire mid-test

Cool idea? Let's collaborate.

Have a passion project or experimental concept? I love exploring new ideas and building things that push creative boundaries.

Start a Conversation