# vivian-olivia/forward architecture

> Architecture diagram of the GitHub repository vivian-olivia/forward, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vivian-olivia/forward
- Repository: https://github.com/vivian-olivia/forward

## Overview

Forward is a GKDI Tangerang anniversary event site: visitors discover the event, ministries, and related gatherings, then can submit RSVP/contact details. The home page composes the main experience; the app layout adds the envelope introduction and music player. The RSVP API validates and normalizes submitted data before handing it to a Google Apps Script webhook that appends a spreadsheet row. The excerpts establish the registration backend, but do not show the form’s submission wiring, so that connection is omitted. Several page sections are represented from the tree rather than sampled implementation.

Main entry points: [`app/page.tsx`](https://github.com/vivian-olivia/forward/blob/main/app/page.tsx) (Home page), [`components/EventDetail.tsx`](https://github.com/vivian-olivia/forward/blob/main/components/EventDetail.tsx) (Event details), [`components/KeepInTouch.tsx`](https://github.com/vivian-olivia/forward/blob/main/components/KeepInTouch.tsx) (Keep in touch), [`app/layout.tsx`](https://github.com/vivian-olivia/forward/blob/main/app/layout.tsx) (App layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Event experience"]
  node_home["Home page<br/>[page.tsx]"]
  node_layout["App layout<br/>[layout.tsx]"]
  node_hero["Hero section<br/>[Hero.tsx]"]
  node_eventdetail["Event details<br/>[EventDetail.tsx]"]
  node_ministries["Ministry gallery<br/>[OurMinistries.tsx]"]
  node_events["Upcoming events<br/>[UpcomingEvents.tsx]"]
  node_countdown["Countdown<br/>[Countdown.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_envelope["Envelope intro<br/>[EnvelopeIntro.tsx]"]
  node_music["Music player<br/>[MusicPlayer.tsx]"]
  node_assets["Ministry photos"]
end

subgraph group_engagement["Visitor engagement"]
  node_keepintouch["Keep in touch<br/>[KeepInTouch.tsx]"]
  node_eventdata["Event constants<br/>[event.ts]"]
  node_templates["Message templates"]
end

subgraph group_registration["RSVP processing"]
  node_phone["Phone utilities<br/>[phone.ts]"]
  node_rsvp["RSVP endpoint<br/>[route.ts]"]
  node_sheets["Sheets webhook client<br/>[google-sheets.ts]"]
end

subgraph group_integrations["External services"]
  node_apps_script["Apps Script webhook"]
  node_spreadsheet[("Registrant spreadsheet")]
  node_whatsapp["WhatsApp"]
  node_maps["Google Maps"]
  node_calendar["Google Calendar"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_eventdetail
node_home -->|"renders"| node_ministries
node_home -->|"renders"| node_events
node_home -->|"renders"| node_keepintouch
node_home -->|"renders"| node_footer
node_layout -->|"wraps"| node_home
node_layout -->|"wraps"| node_envelope
node_layout -->|"renders"| node_music
node_hero -.->|"uses"| node_countdown
node_ministries -->|"displays"| node_assets
node_eventdetail -->|"reads"| node_eventdata
node_eventdetail -->|"reads"| node_templates
node_eventdetail -->|"embeds and links"| node_maps
node_eventdetail -->|"opens inquiry"| node_whatsapp
node_events -->|"links locations"| node_maps
node_events -->|"creates reminders"| node_calendar
node_keepintouch -->|"builds message"| node_templates
node_keepintouch -->|"validates"| node_phone
node_keepintouch -->|"opens chat"| node_whatsapp
node_visitor -->|"submits RSVP"| node_rsvp
node_rsvp -->|"normalizes"| node_phone
node_rsvp -->|"appends registrant"| node_sheets
node_sheets -->|"posts row"| node_apps_script
node_apps_script -->|"writes row"| node_spreadsheet

click node_home "https://github.com/vivian-olivia/forward/blob/main/app/page.tsx"
click node_layout "https://github.com/vivian-olivia/forward/blob/main/app/layout.tsx"
click node_hero "https://github.com/vivian-olivia/forward/blob/main/components/Hero.tsx"
click node_eventdetail "https://github.com/vivian-olivia/forward/blob/main/components/EventDetail.tsx"
click node_ministries "https://github.com/vivian-olivia/forward/blob/main/components/OurMinistries.tsx"
click node_events "https://github.com/vivian-olivia/forward/blob/main/components/UpcomingEvents.tsx"
click node_countdown "https://github.com/vivian-olivia/forward/blob/main/components/Countdown.tsx"
click node_footer "https://github.com/vivian-olivia/forward/blob/main/components/Footer.tsx"
click node_envelope "https://github.com/vivian-olivia/forward/blob/main/components/EnvelopeIntro.tsx"
click node_music "https://github.com/vivian-olivia/forward/blob/main/components/MusicPlayer.tsx"
click node_assets "https://github.com/vivian-olivia/forward/tree/main/public/Photos"
click node_keepintouch "https://github.com/vivian-olivia/forward/blob/main/components/KeepInTouch.tsx"
click node_eventdata "https://github.com/vivian-olivia/forward/blob/main/lib/event.ts"
click node_templates "https://github.com/vivian-olivia/forward/blob/main/lib/message-templates.ts"
click node_phone "https://github.com/vivian-olivia/forward/blob/main/lib/phone.ts"
click node_rsvp "https://github.com/vivian-olivia/forward/blob/main/app/api/rsvp/route.ts"
click node_sheets "https://github.com/vivian-olivia/forward/blob/main/lib/google-sheets.ts"
click node_apps_script "https://github.com/vivian-olivia/forward/blob/main/docs/apps-script-webhook.gs"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_layout,node_hero,node_eventdetail,node_ministries,node_events,node_countdown,node_footer,node_envelope,node_music,node_assets toneBlue
class node_keepintouch,node_eventdata,node_templates toneAmber
class node_phone,node_rsvp,node_sheets toneMint
class node_apps_script,node_spreadsheet,node_whatsapp,node_maps,node_calendar toneRose
class node_visitor toneIndigo
```

## Components

### Event experience

- [Home page](https://github.com/vivian-olivia/forward/blob/main/app/page.tsx): `app/page.tsx`
- [App layout](https://github.com/vivian-olivia/forward/blob/main/app/layout.tsx): `app/layout.tsx`
- [Hero section](https://github.com/vivian-olivia/forward/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [Event details](https://github.com/vivian-olivia/forward/blob/main/components/EventDetail.tsx): `components/EventDetail.tsx`
- [Ministry gallery](https://github.com/vivian-olivia/forward/blob/main/components/OurMinistries.tsx): `components/OurMinistries.tsx`
- [Upcoming events](https://github.com/vivian-olivia/forward/blob/main/components/UpcomingEvents.tsx): `components/UpcomingEvents.tsx`
- [Countdown](https://github.com/vivian-olivia/forward/blob/main/components/Countdown.tsx): `components/Countdown.tsx`
- [Footer](https://github.com/vivian-olivia/forward/blob/main/components/Footer.tsx): `components/Footer.tsx`
- [Envelope intro](https://github.com/vivian-olivia/forward/blob/main/components/EnvelopeIntro.tsx): `components/EnvelopeIntro.tsx`
- [Music player](https://github.com/vivian-olivia/forward/blob/main/components/MusicPlayer.tsx): `components/MusicPlayer.tsx`
- [Ministry photos](https://github.com/vivian-olivia/forward/tree/main/public/Photos): `public/Photos`

### Visitor engagement

- [Keep in touch](https://github.com/vivian-olivia/forward/blob/main/components/KeepInTouch.tsx): `components/KeepInTouch.tsx`
- [Event constants](https://github.com/vivian-olivia/forward/blob/main/lib/event.ts): `lib/event.ts`
- [Message templates](https://github.com/vivian-olivia/forward/blob/main/lib/message-templates.ts): `lib/message-templates.ts`

### RSVP processing

- [Phone utilities](https://github.com/vivian-olivia/forward/blob/main/lib/phone.ts): `lib/phone.ts`
- [RSVP endpoint](https://github.com/vivian-olivia/forward/blob/main/app/api/rsvp/route.ts): `app/api/rsvp/route.ts`
- [Sheets webhook client](https://github.com/vivian-olivia/forward/blob/main/lib/google-sheets.ts): `lib/google-sheets.ts`

### External services

- [Apps Script webhook](https://github.com/vivian-olivia/forward/blob/main/docs/apps-script-webhook.gs): `docs/apps-script-webhook.gs`
- **Registrant spreadsheet**
- **WhatsApp**
- **Google Maps**
- **Google Calendar**

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens
- Home page → Hero section: renders
- Home page → Event details: renders
- Home page → Ministry gallery: renders
- Home page → Upcoming events: renders
- Home page → Keep in touch: renders
- Home page → Footer: renders
- App layout → Home page: wraps
- App layout → Envelope intro: wraps
- App layout → Music player: renders
- Hero section → Countdown: uses
- Ministry gallery → Ministry photos: displays
- Event details → Event constants: reads
- Event details → Message templates: reads
- Event details → Google Maps: embeds and links
- Event details → WhatsApp: opens inquiry
- Upcoming events → Google Maps: links locations
- Upcoming events → Google Calendar: creates reminders
- Keep in touch → Message templates: builds message
- Keep in touch → Phone utilities: validates
- Keep in touch → WhatsApp: opens chat
- Visitor → RSVP endpoint: submits RSVP
- RSVP endpoint → Phone utilities: normalizes
- RSVP endpoint → Sheets webhook client: appends registrant
- Sheets webhook client → Apps Script webhook: posts row
- Apps Script webhook → Registrant spreadsheet: writes row