RunLoyal — Feature Mock: KO About Section

01 Feature Clarification

One-liner fed into Claude. Output: what we're building, who it's for, and how we know it works.

📄 01-feature-definition.md

01-feature-definition.md AI GENERATED · REVIEWED ✓

FEATURE

Kennel Owners (KOs) can add an About Us section to their RunLoyal microsite — including their business description, team photo, years in operation, and services offered. This content is entered once in the KO portal settings and automatically displayed on the public-facing microsite.

PROBLEM BEING SOLVED

Kennel owner microsites currently show only booking widgets and service listings. Pet owners have no way to learn who they're trusting with their pets. An About section builds trust and increases booking conversion.

WHO USES IT

User	Role	When
Kennel Owner (KO)	Content author	Portal Settings → Microsite → About tab — one-time setup, editable anytime
Pet Owner (visitor)	Reader	Visits microsite before booking — reads About section to decide if they trust the kennel

DATA FIELDS

Field	Type	Required	Max
Business tagline	text	No	100 chars
About description	textarea	Yes	500 chars
Years in operation	number	No	–
Team photo URL	image upload	No	5MB
Services list	tag array	No	10 tags

RESULT
Feature definition agreed. KO fills About form in portal → data saved to DB → microsite reads and renders it.

🤖 AI Tool Used

Claude

Prompt: "You are a product analyst for RunLoyal. Clarify this feature: Kennel owners want an About section in their microsite, pulling data from portal settings."

↓ One-liner feature request ↑ 01-feature-definition.md

Linear AI

Paste feature-definition.md → Linear auto-creates: 3 sub-tasks (Portal Settings UI, API endpoint, Microsite component) with story points.

↓ 01-feature-definition.md ↑ Linear tickets + estimates

02 Check Existing Flow

Where does About slot into the existing portal + microsite? Map dependencies before touching anything.

📄 02-flow-map.md

02-flow-map.md AI GENERATED · REVIEWED ✓

ENTRY POINTS

Portal: Settings → Microsite → [NEW: About tab]
Microsite: /[slug] — About section renders below hero if data exists

EXIT POINTS

KO saves form → stays on About tab, shows success toast
Pet Owner reads About → scrolls to booking widget (no exit needed)

DEPENDENCIES

Name	Type	R/W	Risk
`kennel_settings` table	DB table	RW	MED — shared by all portal settings
`MicrositeSettingsModule`	Angular module	Modified	MED — existing tab group
`MicrositePageComponent`	Angular component	Modified	LOW — add new section
`KennelSettingsController`	NestJS controller	Modified	LOW — new endpoints only
S3 / file upload service	Service	R	LOW — already used for logos

SHARED COMPONENTS AT RISK

MicrositeSettingsModule — adding a new tab; must not break existing tabs (Hours, Services, Gallery)
kennel_settings table — adding columns; migration must be additive-only with defaults

🤖 AI Tools Used

Mermaid Live

Claude generates Mermaid flowchart from the flow map. Paste into mermaid.live → instant shareable diagram for design review.

↓ 02-flow-map.md (mermaid block) ↑ Visual flow diagram

Cursor

Dependency table → Cursor searches codebase → highlights MicrositeSettingsModule line 47 and kennel_settings migration 0024 as exact files to modify.

↓ 02-flow-map.md (dependency table) ↑ Affected file list + line numbers

03 Impact Analysis

What does adding About touch? DB migration safety, API changes, microsite perf.

📄 03-impact-list.md

03-impact-list.md AI GENERATED · REVIEWED ✓

DATABASE — MEDIUM

Add 5 nullable columns to kennel_settings: about_tagline, about_description, about_years, about_photo_url, about_services (JSON array)
Migration is additive-only — all columns nullable with NULL defaults. Zero risk of data loss.
No new tables needed. No foreign keys added.
No indexing required — about data always fetched with the full kennel_settings row.

BACKEND — LOW

2 new endpoints: GET /api/kennel-settings/about, PATCH /api/kennel-settings/about
Existing GET /api/microsite/:slug extended to include aboutSection in response (additive)
No existing endpoint signatures change
File upload reuses existing S3 service — no new infra

FRONTEND — LOW

Portal: New AboutSectionComponent in MicrositeSettingsModule — new tab only, existing tabs untouched
Microsite: New AboutDisplayComponent in MicrositePageComponent — conditionally rendered, no existing layout changes

PERFORMANCE — LOW

Microsite API already fetches full kennel_settings row — about fields add ~200 bytes, negligible
Team photo loaded lazily (below the fold) — no LCP impact
Services tags are a JSON array — no additional query needed

Risk	Likelihood	Severity	Mitigation
MicrositeSettingsModule tab break on existing tabs	LOW	MED	Regression test all 4 existing tabs (Hours, Services, Gallery, Payments) before release
About section shows empty state on microsites with no data	MED	MED	Conditional rendering: `*ngIf="aboutData?.description"` — section hidden if no description
Large team photo slows microsite LCP	LOW	LOW	5MB upload limit + serve via CDN + lazy load with `loading="lazy"`
KO uploads invalid image type	MED	LOW	Validate MIME type (jpg/png/webp only) on both frontend and backend

04 Feature Design

Angular components, API contracts, DB schema, and the UI stitch — all defined before dev starts.

📄 04-backend-design.md

04-backend-design.md AI GENERATED · REVIEWED ✓

API ENDPOINTS

Method	Path	Auth	Description
GET	`/api/kennel-settings/about`	KO JWT	Returns current about data for logged-in KO
PATCH	`/api/kennel-settings/about`	KO JWT	Updates about fields (partial update)
POST	`/api/kennel-settings/about/photo`	KO JWT	Upload team photo → returns CDN URL

PATCH REQUEST BODY

{
  "tagline": "Caring for your pets since 2008",
  "description": "Family-run kennel in Austin...",
  "yearsInOperation": 16,
  "teamPhotoUrl": "https://cdn.runloyal.com/...",
  "services": ["Boarding", "Grooming", "Training"]
}
        

MICROSITE API EXTENSION

Existing GET /api/microsite/:slug response gains a new optional field:

"aboutSection": {
  "tagline": string | null,
  "description": string | null,
  "yearsInOperation": number | null,
  "teamPhotoUrl": string | null,
  "services": string[]
}
        

Component	Location	Purpose
`AboutSectionFormComponent`	Portal — `MicrositeSettingsModule`	KO fills in About data. ReactiveForm, mat-slide-toggle for visibility, image upload.
`AboutSectionDisplayComponent`	Microsite — `MicrositePageModule`	Renders About data on public page. Hidden if `description` is null.

Action	Effect	Result
`loadAbout`	GET /about → store	Form pre-filled
`saveAbout`	PATCH /about → store	Success toast shown
`uploadPhoto`	POST /about/photo → URL stored	Preview shown inline

🎨 Live UI Preview

portal.runloyal.com / settings / microsite / about

Hours Services Gallery About Payments

About Your Business

This information appears on your public microsite.

BUSINESS TAGLINE

YEARS IN OPERATION

ABOUT DESCRIPTION *

Family-run kennel in Austin, TX. We treat every dog like our own — with love, patience, and plenty of outdoor playtime. Our facility is fully licensed and our staff are certified pet first responders.

SERVICES (tags)

Boarding ✕ Grooming ✕ Training ✕ Daycare ✕ + Add service

TEAM PHOTO

🐕

team-photo.jpg

2.1 MB · Click to replace

05 Development Angular 17

Claude + Cursor generates every file. Dev reviews, adjusts, and opens PR.

🅰️ about-section.component.ts — AI Generated

about-section-form.component.ts CURSOR GENERATED · DEV REVIEWED ✓

@Component({
  selector: 'app-about-section-form',
  standalone: true,
  imports: [ReactiveFormsModule, MatInputModule,
            MatButtonModule, MatChipsModule,
            MatProgressSpinnerModule],
  templateUrl: './about-section-form.component.html',
  styleUrl:    './about-section-form.component.scss'
})
export class AboutSectionFormComponent implements OnInit {

  private fb     = inject(FormBuilder);
  private svc    = inject(KennelAboutService);
  private snack  = inject(MatSnackBar);

  form = this.fb.group({
    tagline:          ['', Validators.maxLength(100)],
    description:      ['', [Validators.required, Validators.maxLength(500)]],
    yearsInOperation: [null as number | null],
    teamPhotoUrl:     [''],
    services:         [[] as string[]],
  });

  saving   = signal(false);
  uploading = signal(false);

  ngOnInit() {
    this.svc.getAbout().subscribe(data => {
      if (data) this.form.patchValue(data);
    });
  }

  onSave() {
    if (this.form.invalid) return;
    this.saving.set(true);
    this.svc.updateAbout(this.form.value).subscribe({
      next: () => { this.snack.open('About section saved!', '✓', { duration: 3000 }); },
      error: () => { this.snack.open('Save failed. Try again.', '✕'); },
      complete: () => { this.saving.set(false); }
    });
  }
}
        

06 Testing & Regression

Claude generates Cypress e2e tests and Angular unit tests from the test cases table.

📄 06-test-cases.md

06-test-cases.md AI GENERATED · REVIEWED ✓

ID	Scenario	Steps	Expected	Priority
TC-01	KO saves About form	Login → Settings → Microsite → About → fill fields → Save	Toast "saved!", data persists on reload	HIGH
TC-02	Microsite shows About	KO saves data → visit /[slug] → scroll to About	About section visible with correct data	HIGH
TC-03	No data = section hidden	New KO (no About data) → visit microsite	About section not in DOM	HIGH
TC-04	Description required	Leave description empty → click Save	Validation error shown, no API call	MED
TC-05	Existing tabs still work	Navigate to Hours, Services, Gallery tabs	All tabs render without error	HIGH (regression)
TC-06	Unauthenticated PATCH	Call PATCH /api/kennel-settings/about without token	401 Unauthorized	HIGH

Category	Total	Passed
Unit Tests (ng test)	12	12
E2E Tests (Cypress)	6	6
Regression (existing tabs)	4	4
Security (auth check)	2	2

07 Release & Deployment

AI generates release notes, CI deploy workflow, and customer-facing announcement.

📄 07-release-notes.md

07-release-notes.md AI GENERATED · REVIEWED ✓

Release v2.14.0 — KO About Section

What's New: Kennel owners can now add an About section to their microsite directly from portal settings. Fill in your story once — pet owners see it every time they visit your page.

WHO THIS AFFECTS

All Kennel Owners with an active microsite. No action required — section is hidden until you add content.

CHANGES

✅ New "About" tab in Portal → Settings → Microsite
✅ Fields: tagline, description, years in operation, team photo, services
✅ About section displays on microsite when description is filled in
✅ Microsite stays unchanged for KOs who don't fill in the About section

CUSTOMER ANNOUNCEMENT (Intercom AI version)

🐾 New: Tell pet owners your story!
You can now add an About section to your microsite. Share your background, years of experience, and what makes your kennel special. Go to Settings → Microsite → About to set it up.

FEATURE

PROBLEM BEING SOLVED

WHO USES IT

DATA FIELDS

USER STORIES

SUCCESS CRITERIA

ENTRY POINTS

EXIT POINTS

DEPENDENCIES

SHARED COMPONENTS AT RISK

DATABASE — MEDIUM

BACKEND — LOW

FRONTEND — LOW

PERFORMANCE — LOW

RISK REGISTER

API ENDPOINTS

PATCH REQUEST BODY

MICROSITE API EXTENSION

MIGRATION — AddAboutSectionToKennelSettings

ANGULAR COMPONENTS

UI STITCH (FULL MODULE WIRE)

STATE MANAGEMENT (NgRx Signals)

Caring for pets since 2008

PR: feat/ko-about-section

FILES CHANGED

HOW TO TEST

Release v2.14.0 — KO About Section

WHO THIS AFFECTS

CHANGES

CUSTOMER ANNOUNCEMENT (Intercom AI version)