IPTA CMS

🎹

Teachers

{{ teachersMissingPhoto ? teachersMissingPhoto + ' need photo' : 'All have photos' }}

📅

Events

📄

Pages

{{ pagesInNav }} in nav

🏛️

Board Members

{{ boardMissingBio ? boardMissingBio + ' need bio' : 'All bios complete' }}

🔐

Admin Users

Next Event

{{ nextEvent.daysAway === 0 ? 'Today' : nextEvent.daysAway === 1 ? 'day away' : 'days away' }}

Season complete — all events have passed.

{{ seasonLabel }}

No events added yet.

Needs Attention

{{ teachersMissingPhoto }} teacher{{ teachersMissingPhoto !== 1 ? 's' : '' }} missing photo All teacher photos uploaded

{{ teachersMissingAreas }} teacher{{ teachersMissingAreas !== 1 ? 's' : '' }} missing service areas All teachers have service areas

{{ boardMissingPhoto }} board member{{ boardMissingPhoto !== 1 ? 's' : '' }} missing photo All board photos uploaded

{{ boardMissingBio }} board member{{ boardMissingBio !== 1 ? 's' : '' }} missing bio All board bios complete

Quick Actions

Add New Teacher

Add New Event

Add New Page

View API Endpoints

{{ props.row.lastName }}, {{ props.row.firstName }}

{{ (Array.isArray(props.row.areasServed) ? props.row.areasServed.join(', ') : props.row.areasServed) || '—' }}

{{ props.row.name }}

{{ props.row.title }}

{{ props.row.time }} · {{ props.row.location || 'TBD' }}

Saving… ★ = Featured · Drag rows to reorder

{{ page.title }} /{{ page.slug }}

Built-in — not editable {{ (page.sections||[]).length }} section{{ (page.sections||[]).length!==1?'s':'' }}

{{ pageSearch ? 'No pages match your search.' : 'No pages yet. Click "Add Page" to get started.' }}

/

Sections {{ activePage.sections.length }}

No sections yet

Add one below or use AI to build the page

Select a section to edit

Click any section on the left to open its editor here

AI Page Assistant AI

{{ props.row.email }}

API Reference IPTA Headless CMS · v2

The IPTA CMS exposes a REST API served via Firebase Cloud Functions. Use it to build a fully custom public website — fetch teachers, events, pages, and navigation without any CMS login. All data is JSON.

Base URL

https://ipta-cms.web.app

Content-Type

application/json

Authentication: All GET endpoints are publicly accessible — no API key or login required. Use them freely from any public website. POST, PUT, and DELETE operations require a Firebase Auth ID token passed as Authorization: Bearer <token>.

Teachers Public Read

The teacher directory. Each teacher record includes contact info, the geographic service areas they cover, and a photo URL. Use the area or zip query params to power a "Find a Teacher Near Me" feature.

GET/api/teachersReturns all teachers as an array

GET/api/teachers/:idReturns a single teacher object

GET/api/teachers?area=CarmelFilter by service area name

GET/api/teachers?zip=46032Filter by zip code served

POST/api/teachersAuth required

PUT/api/teachers/:idAuth required

DEL/api/teachers/:idAuth required

Teacher Object Fields

Field	Type	Description
id	string	Firestore document ID. Unique identifier for this teacher.
firstName	string	Teacher's first name.
lastName	string	Teacher's last name.
email	string	Contact email address.
phone	string	Contact phone number.
website	string	Teacher's personal or studio website URL. Always includes `https://`.
photo	string	Firebase Storage download URL for their headshot. May be empty string if not uploaded.
areasServed	string[]	Array of geographic area names they serve (e.g. `["Carmel", "Fishers"]`).
zipcodesServed	string[]	Array of zip code strings automatically derived from areasServed. Use this for zip-based lookups.
createdAt	string	ISO 8601 timestamp of when the record was created.
updatedAt	string	ISO 8601 timestamp of last update.

{ "id": "abc123", "firstName": "Caroline", "lastName": "Ahn", "email": "caroline@example.com", "phone": "317-555-1234", "website": "https://carolineahn.com", "photo": "https://firebasestorage.googleapis.com/...", "areasServed": ["Carmel", "Fishers"], "zipcodesServed": ["46032", "46033", "46037", "46038"], "createdAt": "2024-09-01T14:22:00.000Z", "updatedAt": "2025-01-15T09:04:00.000Z" }

Events Public Read

Program events and workshops. Dates are stored as human-readable strings (e.g. "Friday, April 12, 2024") rather than timestamps, so display them as-is. Use ?upcoming=true to get events sorted with the most recently added first.

GET/api/eventsAll events, unordered

GET/api/events?upcoming=trueAll events, sorted by createdAt desc

GET/api/events/:idSingle event object

POST/api/eventsAuth required

PUT/api/events/:idAuth required

DEL/api/events/:idAuth required

Event Object Fields

Field	Type	Description
id	string	Firestore document ID.
title	string	Event title or name.
date	string	Human-readable date string, e.g. `"Friday, April 12, 2024"`. Parse with `new Date(event.date)` for sorting.
time	string	Time range string, e.g. `"10:00 AM – 11:30 AM"`.
location	string	Venue name and/or address.
presenter	string	Name of the presenter or performer.
description	string	Plain text description of the event.
bio	string	Presenter biography, plain text.
createdAt	string	ISO 8601 timestamp.

{ "id": "evt456", "title": "Early Childhood Piano Workshop", "date": "Saturday, March 8, 2025", "time": "9:00 AM - 12:00 PM", "location": "Butler University, Jordan Hall", "presenter": "Dr. Susan Payne", "description": "An interactive workshop exploring...", "bio": "Dr. Payne is a professor of music education...", "createdAt": "2025-01-10T16:30:00.000Z" }

Pages & Page Sections Public Read

CMS-managed pages. Each page has a slug (the URL path) and a sections array that defines the full content of the page. Your public site should fetch a page by slug, then render each section in order based on its type.

GET/api/pagesAll pages (includes sections)

GET/api/pages?slug=aboutGet page by URL slug — use this for routing

GET/api/pages/:idGet page by Firestore ID

POST/api/pagesAuth required

PUT/api/pages/:idAuth required

DEL/api/pages/:idAuth required

Tip for routing: Fetch /api/pages?slug=about returns an array — take the first element. To build a site router, fetch all pages on load, index them by slug, then look up the current URL path to find the matching page.

Page Object Fields

Field	Type	Description
id	string	Firestore document ID.
title	string	Page title, for use in `<title>` tags and headings.
slug	string	URL-safe identifier. Match against the current URL path to load the right page (e.g. `"about"`, `"membership"`).
sections	Section[]	Ordered array of content sections. Render these in order. See section types below.
updatedAt	string	ISO 8601 timestamp — useful for cache invalidation.

Section Object (universal fields)

Field	Type	Description
id	string	Unique section ID within the page.
type	string	Section type — determines which renderer to use. See types below.
order	number	1-based render order. Sections are already sorted in the API response.
bgStyle	string	Background color hint: `""` = white, `"grey"` = light warm grey (#f0eeea), `"blue"` = brand blue (#5cc0ed), `"dark"` = dark navy (#1a1a2e). Apply to the section's outer wrapper.
content	object	Section-specific content fields. Shape depends on `type`. See below.

Section Types & Content Schemas

hero — Full-width banner section

content field	Type	Description
headline	string	Large primary heading text.
subtext	string	Supporting paragraph beneath the headline.
ctaText	string	Call-to-action button label. Empty string if no button.
ctaUrl	string	Button link target. Can be relative (`/about`) or absolute.
imageUrl	string	Firebase Storage URL for the hero background/side image. May be empty.
imageAlt	string	Alt text for the image.
imageAnchor	string	CSS `object-position` value controlling the image focal point. One of: `top left`, `top center`, `top right`, `center left`, `center center`, `center right`, `bottom left`, `bottom center`, `bottom right`. Defaults to `center center` when absent.

Render the image with object-fit: cover; object-position: {imageAnchor} so the focal point stays visible at any container size.

text — Rich text content block

content field	Type	Description
markdown	string	HTML string. Render with `innerHTML` or `v-html`. Contains `<h2>`, `<h3>`, `<p>`, `<strong>`, `<em>`, `<ul>`/`<li>`, `<a>` tags.

Despite the field name, the value is HTML, not Markdown syntax. Always render it as raw HTML. Sanitize with DOMPurify if accepting untrusted content.

image-text — Side-by-side image and rich text

content field	Type	Description
markdown	string	HTML string — same as `text` section above. Render with `innerHTML`.
imageUrl	string	Firebase Storage URL for the image.
imageAlt	string	Alt text for the image.
imagePosition	string	`"left"` or `"right"` — which side the image appears on in a two-column layout.

card-grid — Grid of highlight cards

content field	Type	Description
headline	string	Optional section heading displayed above the grid.
columns	number	`2` or `3` — number of columns in the grid.
showIcons	boolean	Whether card emoji icons should be displayed.
cards	Card[]	Array of card objects (see below).

Card Object

field	Type	Description
title	string	Card heading.
text	string	Card body text (plain text).
icon	string	Emoji icon character, e.g. `"🎹"`. May be empty.
imageUrl	string	Optional card image URL.
ctaText	string	Optional button label.
ctaUrl	string	Optional button link.

link-list — Organized list of links or downloads

content field	Type	Description
headline	string	Optional section heading.
links	Link[]	Array of link objects.

Link Object

field	Type	Description
label	string	Visible link text.
url	string	Link destination. May be a relative path, absolute URL, or asset path like `/assets/docs/file.pdf`.
description	string	Optional short description shown beneath the link.
icon	string	Optional MDI icon name (without the `mdi-` prefix), e.g. `"download"`.

cta-banner — Call-to-action banner

content field	Type	Description
headline	string	Bold banner heading.
body	string	Supporting paragraph text (plain text).
ctaText	string	Button label.
ctaUrl	string	Button link target.

Full Page Response Example

{ "id": "page789", "title": "About IPTA", "slug": "about", "updatedAt": "2025-03-01T12:00:00.000Z", "sections": [ { "id": "s1", "type": "hero", "order": 1, "bgStyle": "blue", "content": { "headline": "Indiana Piano Teachers Association", "subtext": "Supporting piano education across Indiana since 1935.", "ctaText": "Find a Teacher", "ctaUrl": "/teachers", "imageUrl": "https://firebasestorage.googleapis.com/...", "imageAlt": "Piano keys close-up" } }, { "id": "s2", "type": "text", "order": 2, "bgStyle": "", "content": { "markdown": "<h2>Our Mission</h2><p>IPTA exists to advance piano...</p>" } } ] }

Site Config & Navigation Public Read

Returns the global site configuration, including the navigation structure. Use this to build your site's nav menu — it tells you which pages are "featured" (in the primary nav), in what order, and what their URL slugs are.

GET/api/site-configReturns site config with nav array

PUT/api/site-configAuth required

Nav Item Fields (within the nav array)

Field	Type	Description
pageId	string	The page's Firestore ID. Use to cross-reference with the `/api/pages` response.
slug	string	URL slug for this nav item — use as the link href (e.g. `/about`).
featured	boolean	If `true`, this page appears in the primary navigation. If `false`, it's a secondary/footer page.
navOrder	number	Sort order for the nav. Sort ascending by this field to render the menu in the correct sequence.

{ "id": "main", "nav": [ { "pageId": "page789", "slug": "about", "featured": true, "navOrder": 1 }, { "pageId": "page012", "slug": "membership", "featured": true, "navOrder": 2 }, { "pageId": "page345", "slug": "competition", "featured": true, "navOrder": 3 }, { "pageId": "page678", "slug": "resources", "featured": false, "navOrder": 4 } ] }

Board Members Public Read

IPTA board member directory. Use to build an "About / Leadership" page section.

GET/api/board-membersReturns all board members

GET/api/board-members/:idSingle board member

POST/api/board-membersAuth required

PUT/api/board-members/:idAuth required

DEL/api/board-members/:idAuth required

Board Member Object Fields

Field	Type	Description
id	string	Firestore document ID.
name	string	Full name.
title	string	Board title or role (e.g. `"President"`, `"Treasurer"`).
bio	string	Short biography, plain text.
photo	string	Firebase Storage URL for their headshot. May be empty.

Quick Start: Fetching Data in JavaScript

No library or authentication needed for read operations. Here's a minimal example of loading a page by slug and rendering its sections:

// Fetch the navigation to build your menu const { nav } = await fetch('https://ipta-cms.web.app/api/site-config').then(r => r.json()); const featuredNav = nav.filter(n => n.featured).sort((a, b) => a.navOrder - b.navOrder); // Fetch a page by its URL slug const slug = window.location.pathname.replace('/', '') || 'home'; const pages = await fetch(`https://ipta-cms.web.app/api/pages?slug=${slug}`).then(r => r.json()); const page = pages[0]; // slug is unique // Render each section based on its type page.sections.forEach(section => { switch (section.type) { case 'hero': renderHero(section.content, section.bgStyle); break; case 'text': renderText(section.content, section.bgStyle); break; case 'image-text': renderImageText(section.content, section.bgStyle); break; case 'card-grid': renderCardGrid(section.content, section.bgStyle); break; case 'link-list': renderLinkList(section.content, section.bgStyle); break; case 'cta-banner': renderCtaBanner(section.content, section.bgStyle); break; } }); // bgStyle → background color map const bgColors = { '': '#ffffff', grey: '#f0eeea', blue: '#5cc0ed', dark: '#1a1a2e' };

{{ pageTitle }}