Build Tagalog Learning App for AWS Manila Community Day with Educational-First Dev Tips

Disclaimer

Purpose: This static app is an educational prototype for language practice and developer sharing. It helps learners prepare polite Tagalog phrases for AWS Manila Community Day.

Non-Commercial: This project has no paid feature, no advertising, no registration requirement, and no commercial purpose. It is intended for learning, experimentation, and community preparation.

No Guarantees: Generated language content may contain mistakes. Tagalog translations, grammar explanations, pronunciation guides, and cultural notes should be checked by native speakers before production use.

Scope: This app is not an official AWS product, not an official translation tool, and not a substitute for human language instruction. It is a technical demo with useful learning content.

Community Respect: The app should avoid stereotypes and should teach polite language carefully. Words like po, opo, kayo, and ninyo should be explained as tools for respect, not decoration.

Demo

Umalis tayo nang maaga bukas.

Grammatical Breakdown

• Umalis: Means to leave or depart.
• tayo: Inclusive "we," meaning the speaker and listener together.
• nang: Links the action to the manner or timing.
• maaga: Means "early."
• bukas: Means "tomorrow."

Pronunciation Guide

It is pronounced word by word as:

oo-mah-lees tah-yoh nahng mah-mah-ah-gah boo-kahs.

• Umalis: oo-mah-lees.
• tayo: tah-yoh.
• nang: nahng.
• maaga: mah-mah-ah-gah.
• bukas: boo-kahs.
  Keep the vowels open and say the planning sentence calmly.

Content Snapshot

Natural Tagalog: Umalis tayo nang maaga bukas.
Polite Tagalog: Umalis po tayo nang maaga bukas.
Extra Example 1: Sa sakayan, umalis tayo nang maaga bukas.
Extra Example 2: Okay lang, umalis tayo nang maaga bukas.
Related Daily Example: Napakainit ng araw ngayon.

Table of Content

Part 1: Keep The Demo Static Until The Learning Loop Works

This section explains why a static app is enough for the first version. HTML, CSS, JavaScript, and JSON can prove the sentence-card flow without accounts, servers, or complex deployment.

Part 2: Design The Mobile Reading Order

This section shows the mobile layout rule: content first, article list behind a button. The learner should see the current lesson before navigating across categories.

Part 3: Build The Content Schema And Renderer

This section defines a practical content schema for Tagalog sentence cards and shows how to render the same card shape across greetings, workshops, directions, volunteers, and waiting phrases.

Part 4: Prompt QA For Technical Sharing

This section gives prompt checks and development checks that make the project safe to present in a technical sharing session.

Part 5: Field Notes From The Demo

This section documents reusable dev tips: static-first deployment, card consistency, accessibility, cultural QA, and prompt specificity.

Part 1: Keep The Demo Static Until The Learning Loop Works

Goal

Create a useful Tagalog learning app without a backend. The first version should prove that learners can open a page, choose an article, read sentence cards, and practice phrases for AWS Manila Community Day.

Prompt

Create a dark-mode mobile responsive static HTML Tagalog learning app.

Desktop UI:
- Left: article list with topic name and 20-word summary
- Right: article content

Mobile UI:
- Top: article content
- Button: open article list with topic name and summary

Content:
- 24 articles total
- 11 articles for AWS Community Day, 8 Friendship articles, and 5 Manila Daily articles
- Each article has sentence cards for greetings, directions, workshops, networking, volunteers, waiting time, and goodbye
- Each sentence card includes natural Tagalog, polite Tagalog, friendly Filipino-English, playful Filipino-English, grammar, examples, and pronunciation

Result

The app can ship as static files. A learner can open index.html, select an article, and read event-ready phrases. The app does not need accounts or a database to validate the learning experience.

Tips

• Static first is not weak when the content contract is clear.
• Use one CSS file or embedded CSS for quick demos.
• Use one renderer for every sentence card.
• Keep each article as its own HTML page if the goal is easy sharing.
• Add a downloadable zip for offline review.

Suggested file structure

/tagalog-community-day-demo
  index.html
  article-1-community-greetings-introductions.html
  article-2-community-directions-registration.html
  article-3-community-workshops-learning.html
  article-4-community-networking-belonging.html
  article-5-community-volunteers-time-goodbye.html
  styles.css
  app.js

Part 2: Design The Mobile Reading Order

Goal

Make the app useful inside a busy event venue. A learner should immediately see the current article content on mobile, then open the article list only when needed.

Prompt

Make the mobile version content-first.

Desktop:
- Use a two-column layout.
- Put article navigation on the left.
- Put article content on the right.

Mobile:
- Put article content at the top.
- Hide the article list by default.
- Show an Open Articles List button.
- Display article links in a drawer or panel.
- Make touch targets large enough for one-handed use.

Result

The learner sees the lesson before the navigation. This matters because the app is not a catalog first; it is a practice tool first.

CSS sketch

.layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.5rem;
}

.sidebar {
  position: sticky;
  top: 1rem;
}

.mobile-menu-button {
  display: none;
}

@media (max-width: 860px) {
  .layout {
    display: flex;
    flex-direction: column;
  }

  .content {
    order: 1;
  }

  .mobile-menu-button {
    display: block;
    order: 2;
  }

  .sidebar {
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-height: 72vh;
    overflow: auto;
  }

  .sidebar.open {
    display: block;
  }
}

Demo examples to test on mobile

Magpahinga muna tayo sa lilim.
Umupo ka sandali kung nahihilo ka.
Paki-check po kung pumasok ang bayad.

If these three examples are easy to read, copy, and say aloud on mobile, the layout is moving in the right direction.

Part 3: Build The Content Schema And Renderer

Goal

Use one content model across all event categories.

Prompt

Create a JSON schema for Tagalog sentence cards.
The schema must support:
- English input
- Natural Tagalog
- Polite Tagalog
- Friendly Filipino-English
- Playful Filipino-English
- Tone
- Cultural context
- Grammar breakdown
- Extra Examples
- Pronunciation guide
- Event category

Result

The app can render greetings, workshop questions, volunteer thanks, and waiting phrases with the same component.

Example schema

{
  "articles": [
    {
      "id": "manila-daily-health-safety-weather-money",
      "title": "Manila Daily: Health, Safety, Weather, and Money",
      "summary": "Ask for help, talk about weather, handle payments, describe simple health needs, and stay safe around Manila.",
      "cards": [
        {
          "englishInput": "Sit for a moment if you feel dizzy.",
          "naturalTagalog": "Umupo ka sandali kung nahihilo ka.",
          "politeTagalog": "Umupo po kayo sandali kung nahihilo kayo.",
          "friendlyFilipinoEnglish": "Sit muna po kung dizzy.",
          "playfulFilipinoEnglish": "Umupo muna, easy lang all right.",
          "tone": "caring, practical, health-and-safety-ready",
          "culturalContext": "Use the polite form with guards, staff, drivers, vendors, elders, and first-time contacts.",
          "grammar": [
            { "term": "Umupo", "meaning": "sit down" },
            { "term": "sandali", "meaning": "for a moment" },
            { "term": "nahihilo", "meaning": "feeling dizzy" },
            { "term": "po", "meaning": "politeness marker" }
          ],
          "examples": [
            {
              "tagalog": "Magpahinga muna tayo sa lilim.",
              "english": "Let us rest in the shade first."
            },
            {
              "tagalog": "Umupo ka sandali kung nahihilo ka.",
              "english": "Sit for a moment if you feel dizzy."
            },
            {
              "tagalog": "Paki-check po kung pumasok ang bayad.",
              "english": "Please check if the payment came in."
            }
          ]
        }
      ]
    }
  ]
}

Renderer sketch

function renderSentenceCard(card) {
  const grammar = card.grammar
    .map((item) => `<li><strong>${item.term}:</strong> ${item.meaning}</li>`)
    .join("");

  const examples = card.examples
    .map(
      (example) => `
      <li>
        <strong>Tagalog:</strong> ${example.tagalog}<br>
        <strong>English:</strong> ${example.english}
      </li>
    `,
    )
    .join("");

  return `
    <article class="sentence-card">
      <h3>${card.englishInput}</h3>
      <dl>
        <dt>Natural Tagalog:</dt><dd>${card.naturalTagalog}</dd>
        <dt>Polite Tagalog:</dt><dd>${card.politeTagalog}</dd>
        <dt>Friendly Filipino-English:</dt><dd>${card.friendlyFilipinoEnglish}</dd>
        <dt>Playful Filipino-English:</dt><dd>${card.playfulFilipinoEnglish}</dd>
        <dt>Tone:</dt><dd>${card.tone}</dd>
        <dt>Cultural Context:</dt><dd>${card.culturalContext}</dd>
        <dt>Grammatical Breakdown:</dt><dd><ul>${grammar}</ul></dd>
        <dt>Extra Examples:</dt><dd><ol>${examples}</ol></dd>
      </dl>
    </article>
  `;
}

Implementation

Ccontent-schema and renderer section because it turns the article metadata, sentence-card structure, responsive CSS, page renderer, article writer, ZIP creation, and validation checks into one static-site build pipeline.

from pathlib import Path
import html
import zipfile
import textwrap
import re
import json
import os

out_dir = Path(".")

# Article metadata with 20-word summaries
# checked by simple whitespace count in code comments/log output.
articles = [
    {
        "id": 1,
        "slug": "community-greetings-introductions",
        "title": "Community Day: Greetings and Respectful Introductions",
        "category": "Community Day",
        "summary": (
            "Practice polite greetings, names, beginner phrases, and warm introductions "
            "for meeting speakers, volunteers, students, and builders in Manila confidently."
        ),
    },
    {
        "id": 2,
        "slug": "community-directions-registration",
        "title": "Community Day: Directions, Venue, and Registration",
        "category": "Community Day",
        "summary": (
            "Learn useful venue phrases for registration, rooms, seats, restrooms, exits, "
            "queues, badges, and polite help requests during the event."
        ),
    },
    {
        "id": 3,
        "slug": "community-workshops-learning",
        "title": "Manila Daily: Health, Safety, Weather, and Money",
        "category": "Community Day",
        "summary": (
            "Ask workshop questions, request repeats, discuss demos, serverless ideas, "
            "AI solutions, cloud labs, and learning goals with respectful Tagalog."
        ),
    },
    {
        "id": 4,
        "slug": "community-networking-belonging",
        "title": "Community Day: Networking, Connect, and Belong",
        "category": "Community Day",
        "summary": (
            "Use friendly phrases to connect with developers, students, leaders, and peers "
            "while expressing excitement, humility, gratitude, and belonging."
        ),
    },
    {
        "id": 5,
        "slug": "community-volunteers-time-goodbye",
        "title": "Community Day: Volunteers, Waiting, Time, and Goodbye",
        "category": "Community Day",
        "summary": (
            "Thank volunteers, manage waiting time, apologize politely, coordinate arrivals, "
            "say goodbye warmly, and respect schedules with practical phrases."
        ),
    },
    {
        "id": 6,
        "slug": "friendship-one-question-one-answer",
        "title": "Friendship Tagalog: One Question, One Gentle Answer",
        "category": "Friendship",
        "summary": (
            "Practice original friendship questions about sincerity, answers, hope, courage, "
            "and honest feelings without copying any copyrighted song lyrics."
        ),
    },
    {
        "id": 7,
        "slug": "friendship-friends-only-feelings",
        "title": "Friendship Tagalog: Friends Only Feelings",
        "category": "Friendship",
        "summary": (
            "Learn gentle phrases about friendship, uncertainty, hope, boundaries, and "
            "emotional clarity using respectful, soft, beginner-friendly Tagalog patterns."
        ),
    },
    {
        "id": 8,
        "slug": "friendship-you-are-my-beloved",
        "title": "Friendship Tagalog: You Are My Beloved",
        "category": "Friendship",
        "summary": (
            "Explore original poetic devotion phrases about care, affection, trust, support, "
            "and choosing someone with warm but simple Tagalog."
        ),
    },
    {
        "id": 9,
        "slug": "friendship-honest-heart-deep-feelings",
        "title": "Friendship Tagalog: Honest Heart and Deep Feelings",
        "category": "Friendship",
        "summary": (
            "Build vocabulary for truthful emotions, nervous hearts, sincere admiration, "
            "quiet longing, and careful confession in natural polite Tagalog."
        ),
    },
    {
        "id": 10,
        "slug": "friendship-distance-hope-promises",
        "title": "Friendship Tagalog: Distance, Hope, and Promises",
        "category": "Friendship",
        "summary": (
            "Practice original phrases about distance, waiting, promises, north and south, "
            "hope, patience, and love that remains steady."
        ),
    },
]

community_sets = {
    1: [
        (
            "I am happy to meet you today.",
            "Masaya akong makilala ka ngayon.",
            "Masaya po akong makilala kayo ngayon.",
            "Happy to meet you today, kumusta!",
            "Masaya akong makilala ka ngayon, all right.",
            "warm, polite, event-ready",
        ),
        (
            "Hello, I am learning Tagalog.",
            "Kumusta, nag-aaral ako ng Tagalog.",
            "Kumusta po, nag-aaral po ako ng Tagalog.",
            "Hello po, learning Tagalog ako.",
            "Kumusta, learning Tagalog na ako, all right.",
            "friendly, beginner-friendly",
        ),
        (
            "My name is Martinez.",
            "Ako si Martinez.",
            "Ako po si Martinez.",
            "Hi po, ako si Martinez.",
            "Ako si Martinez, ready na ako all right.",
            "simple introduction",
        ),
        (
            "This is my first time in Manila.",
            "First time ko sa Manila.",
            "First time ko po sa Manila.",
            "First time ko po sa Manila, excited ako.",
            "First time ko sa Manila, all right amazed.",
            "personal, excited",
        ),
        (
            "I want to greet everyone politely.",
            "Gusto kong bumati sa lahat nang magalang.",
            "Gusto ko pong bumati sa lahat nang magalang.",
            "Gusto ko pong mag-greet sa lahat.",
            "Gusto kong mag-greet sa lahat, polite mode all right.",
            "respectful, practical",
        ),
        (
            "Good morning, everyone.",
            "Magandang umaga sa lahat.",
            "Magandang umaga po sa inyong lahat.",
            "Good morning po sa lahat.",
            "Magandang umaga, ready na tayo all right.",
            "formal greeting",
        ),
        (
            "May I sit here?",
            "Puwede ba akong umupo dito?",
            "Puwede po ba akong umupo dito?",
            "Can I sit here po?",
            "Puwede ba akong umupo dito, all right?",
            "polite request",
        ),
        (
            "I am a beginner, so please speak slowly.",
            "Baguhan ako, kaya pakibagalan.",
            "Baguhan po ako, kaya pakibagalan po.",
            "Beginner po ako, slow lang please.",
            "Beginner ako, slow lang all right please.",
            "humble, practical",
        ),
        (
            "I am excited to join Manila Community Day.",
            "Excited akong sumali sa Manila Community Day.",
            "Excited po akong sumali sa Manila Community Day.",
            "Excited po ako for Manila Community Day.",
            "Excited na ako sa Community Day, all right.",
            "excited, event-ready",
        ),
        (
            "Thank you for welcoming me.",
            "Salamat sa pagtanggap sa akin.",
            "Salamat po sa pagtanggap sa akin.",
            "Thank you po for welcoming me.",
            "Salamat sa welcome, belong na ako all right.",
            "grateful, emotional",
        ),
    ],
    2: [
        (
            "Where is the registration area?",
            "Saan ang registration area?",
            "Saan po ang registration area?",
            "Saan po ang registration area, please?",
            "Saan ang registration area, ready na ako all right.",
            "polite direction",
        ),
        (
            "Where is the workshop room?",
            "Saan ang workshop room?",
            "Saan po ang workshop room?",
            "Saan po ang workshop room, please?",
            "Saan ang workshop room, workshop mode all right.",
            "practical, event-ready",
        ),
        (
            "Could you point me to the entrance?",
            "Puwede mo ba akong ituro sa entrance?",
            "Puwede po ba ninyo akong ituro sa entrance?",
            "Pa-point po sa entrance?",
            "Point me sa entrance, lost na ako all right.",
            "polite help request",
        ),
        (
            "Is this the correct line?",
            "Tamang pila ba ito?",
            "Tamang pila po ba ito?",
            "Correct line po ba ito?",
            "Tamang pila ba ito, checking all right.",
            "queue, practical",
        ),
        (
            "Where can I get my badge?",
            "Saan ko makukuha ang badge ko?",
            "Saan ko po makukuha ang badge ko?",
            "Saan po badge pickup?",
            "Saan badge ko, excited na all right.",
            "registration, polite",
        ),
        (
            "Is there a seat available here?",
            "May bakanteng upuan ba dito?",
            "May bakanteng upuan po ba dito?",
            "May seat po ba dito?",
            "May seat ba dito, sit na ako all right.",
            "polite, seating",
        ),
        (
            "Where is the restroom?",
            "Saan ang restroom?",
            "Saan po ang restroom?",
            "Saan po ang CR?",
            "Saan ang CR, quick lang all right.",
            "practical direction",
        ),
        (
            "What time does the next session start?",
            "Anong oras magsisimula ang susunod na session?",
            "Anong oras po magsisimula ang susunod na session?",
            "What time po next session?",
            "Next session what time, all right.",
            "time, event-ready",
        ),
        (
            "Please wait for me for a few minutes.",
            "Hintayin mo ako ng ilang minuto.",
            "Hintayin n’yo po ako ng ilang minuto.",
            "Wait me for a few minutes po.",
            "Hintayin mo ako, papunta na ako all right.",
            "waiting, coordination",
        ),
        (
            "Please check if the payment arrived.",
            "Paki-check kung pumasok ang bayad sa venue.",
            "Paki-check po kung pumasok ang bayad sa venue.",
            "Payment received po ba?",
            "Paki-check kung pumasok ang bayad sa venue, all right.",
            "payment check",
        ),
    ],
}

# Expand each 10 base sentences to 40 by making contextual variants.
community_contexts = [
    ("at the morning registration", "sa morning registration"),
    ("before the workshop starts", "bago magsimula ang workshop"),
    ("while meeting a volunteer", "habang may nakikilalang volunteer"),
    ("after the session", "pagkatapos ng session"),
]

friendship_contexts = [
    ("when speaking softly", "kapag marahang nagsasalita"),
    ("while waiting for an answer", "habang naghihintay ng sagot"),
    ("in a sincere message", "sa isang tapat na mensahe"),
    ("with a careful heart", "nang may maingat na puso"),
]


def expand(base, article_id):
    contexts = community_contexts if article_id <= 5 else friendship_contexts
    cards = []

    for i, b in enumerate(base):
        for j, (enctx, tlctx) in enumerate(contexts):
            eng, nat, pol, friendly, playful, tone = b

            # Keep sentence clear; add context in background,
            # not necessarily append to every translation.
            cards.append(
                {
                    "num": len(cards) + 1,
                    "background": (
                        f"Use this sentence {enctx}. It helps connect emotion, culture, "
                        "politeness, and practical communication."
                    ),
                    "english": eng,
                    "natural": nat,
                    "polite": pol,
                    "friendly": friendly,
                    "playful": playful,
                    "tone": tone,
                    "context_en": enctx,
                    "context_tl": tlctx,
                }
            )

    return cards[:40]


for a in articles:
    base = community_sets.get(a["id"]) or friendship_sets.get(a["id"])
    a["cards"] = expand(base, a["id"])


# Simple pronunciation generation for consistent guides.
pron_map = {
    "Kumusta": "koo-MOOS-tah",
    "Salamat": "sah-LAH-maht",
    "Puwede": "PWEH-deh",
    "Saan": "SAH-ahn",
    "Ako": "AH-koh",
    "po": "poh",
    "kayo": "KAH-yoh",
    "ninyo": "NEEN-yoh",
    "n’yo": "nyoh",
    "Gusto": "GOOS-toh",
    "Excited": "ek-SAI-ted",
    "Nandito": "nahn-DEE-toh",
    "Papunta": "pah-POON-tah",
    "Hintayin": "hin-tah-YEEN",
    "Pasensya": "pah-SEN-shah",
    "Mahalaga": "mah-hah-LAH-gah",
    "Sasamahan": "sah-sah-MAH-hahn",
    "Kahit": "kah-HEET",
    "Manila": "mah-NEE-lah",
    "Tagalog": "tah-GAH-log",
    "magtanong": "mag-tah-NONG",
    "pakiulit": "pah-kee-OO-lit",
}


def pronunciation(tl):
    # Provide a compact guide using known phrase starts, plus simple fallback.
    for k, v in pron_map.items():
        if tl.startswith(k) or f" {k}" in tl:
            # Highlight first relevant chunk and add readable text.
            return (
                f"Say it slowly and clearly. Start with: {v}. Keep 'po' soft, "
                "and stress the capital syllables in this guide."
            )

    return (
        "Read each vowel clearly: a as ah, e as eh, i as ee, o as oh, u as oo. "
        "Keep the final syllable clear."
    )


def breakdown(card):
    e = card["english"].lower()
    nat = card["natural"]
    items = []

    def add(tag, meaning):
        items.append((tag, meaning))

    if "thank" in e or "salamat" in nat.lower():
        add("Salamat", "thank you; a core gratitude word")
        add(
            "po",
            "politeness marker used with elders, speakers, organizers, volunteers, or new people",
        )
        add("sa", "for, in, at, or to depending on context")

    elif "where" in e or nat.lower().startswith("saan"):
        add("Saan", "where; asks for a place or direction")
        add("po", "polite marker for respectful questions")
        add("ang", "focus marker before the place or thing being asked about")

    elif "may i" in e or "could" in e or "please" in e:
        add("Puwede / Paki-", "may, can, or please; softens a request")
        add("po", "polite marker")
        add("ba", "question marker used in yes/no questions")

    elif "wait" in e or "way" in e or "late" in e:
        add(
            "Hintayin / Papunta / Pasensya",
            "waiting, on-the-way, and apology words for coordination",
        )
        add("na", "now or all right; often shows change of state")
        add("po", "polite marker")

    elif any(
        w in e
        for w in [
            "heart",
            "love",
            "feel",
            "answer",
            "friends",
            "hope",
            "promise",
            "dear",
            "admire",
        ]
    ):
        add("puso / damdamin", "heart or feelings; emotional vocabulary")
        add("sana", "hope or wish; makes the sentence gentle")
        add(
            "po / kayo / ninyo",
            "respectful forms when the tone should stay careful and polite",
        )

    elif "excited" in e:
        add("Excited ako", "I am excited; common Filipino-English expression")
        add("-ng / akong", "linker form connecting I am to the next action")
        add("sumali / matuto", "to join or to learn")

    else:
        add("Ako / ko", "I or my; marks the speaker")
        add("ka / kayo", "you; kayo is polite or plural")
        add("po", "polite marker used for respect")

    return items[:3]


def examples(card, article_id):
    if article_id <= 5:
        return [
            ("Magpahinga muna tayo sa lilim.", "Let us rest in the shade first."),
            ("Umupo ka sandali kung nahihilo ka.", "Sit for a moment if you feel dizzy."),
            ("Paki-check po kung pumasok ang bayad.", "Please check if the payment came in."),
        ]

    return [
        ("Sana maintindihan mo ako.", "I hope you understand me."),
        ("Makikinig po ako nang may respeto.", "I will listen with respect."),
        ("Tapat ang damdamin ko, all right.", "My feeling is sincere all right."),
    ]


def sentence_card_html(card, article):
    bds = "".join(
        f"<li><strong>{html.escape(k)}:</strong> {html.escape(v)}</li>"
        for k, v in breakdown(card)
    )

    exs = "".join(
        (
            f"<li><strong>Tagalog:</strong> {html.escape(tl)}<br>"
            f"<strong>English:</strong> {html.escape(en)}</li>"
        )
        for tl, en in examples(card, article["id"])
    )

    related = (
        "Event pattern: use the polite version first with speakers, organizers, "
        "volunteers, and people you meet for the first time. Casual and playful styles "
        "are better with peers after rapport."
        if article["id"] <= 5
        else (
            "Emotional pattern: keep the sentence gentle, avoid pressure, and use sana, "
            "po, kayo, or ninyo when respect and careful tone matter."
        )
    )

    return f"""
    <article class="sentence-card" id="sentence-{card['num']}">
      <h3>Sentence {card['num']}</h3>
      <dl class="template">
        <dt>Background context:</dt><dd>{html.escape(card['background'])}</dd>
        <dt>English Input:</dt><dd>{html.escape(card['english'])}</dd>
        <dt>Natural Tagalog:</dt><dd lang="tl">{html.escape(card['natural'])}</dd>
        <dt>Polite Tagalog:</dt><dd lang="tl">{html.escape(card['polite'])}</dd>
        <dt>Friendly Filipino-English:</dt><dd>{html.escape(card['friendly'])}</dd>
        <dt>playful Filipino-English:</dt><dd>{html.escape(card['playful'])}</dd>
        <dt>Tone:</dt><dd>{html.escape(card['tone'])}</dd>
        <dt>Cultural Context:</dt><dd>Use the polite form with elders, speakers, organizers, volunteers, venue staff, and first-time contacts. Use casual speech with friends or peers when the situation feels relaxed.</dd>
        <dt>Grammatical Breakdown:</dt><dd><ul>{bds}</ul></dd>
        <dt>Common Context and Idiomatic Use:</dt><dd>This phrase is useful for {html.escape(card['context_en'])}. It teaches both correct Tagalog and a safe respectful option.</dd>
        <dt>Extra Examples:</dt><dd><ol>{exs}</ol></dd>
        <dt>Pronunciation Guide:</dt><dd>{html.escape(pronunciation(card['polite']))}</dd>
        <dt>Related understand emotional, poetic, polite, and practical sentence patterns:</dt><dd>{html.escape(related)}</dd>
      </dl>
    </article>"""

Development skill

The key development skill is separating content generation from content rendering. The AI prompt generates structured content. The UI renders that content. The developer should not manually redesign the page for each new phrase category.

Part 4: Prompt QA For Technical Sharing

Goal

Prepare the project for a developer talk by showing both prompt discipline and code discipline.

Prompt

Review the generated Tagalog learning app content.

Check:
- Does every sentence card include natural Tagalog?
- Does every sentence card include polite Tagalog when needed?
- Are po, opo, kayo, and ninyo explained correctly?
- Is playful Filipino-English labeled as informal?
- Are event phrases useful for AWS Manila Community Day?
- Are waiting and time phrases included?
- Are examples short enough for mobile?
- Does the output avoid unsupported cultural assumptions?

Result

The review step becomes part of the build, not an afterthought. The technical sharing message becomes stronger because the demo shows responsible AI use.

QA checklist

• Content contract exists.
• Every article has a topic and summary.
• Every sentence card has the same field order.
• Polite Tagalog is visible.
• Friendly and playful styles are separated.
• Examples include event actions.
• Mobile layout shows content first.
• Article drawer can open and close.
• Dark mode contrast is readable.
• No prompt-only notes leak into the final UI.

Demo-driven QA examples

Use these latest HTML examples as a regression set:

1. Magpahinga muna tayo sa lilim.
   Checks health/safety context and a natural caring pattern.

2. Umupo ka sandali kung nahihilo ka.
   Checks beginner-friendly advice and clear daily Manila wording.

3. Paki-check po kung pumasok ang bayad.
   Checks polite request wording, payment context, and Extra Example uniqueness.

Part 5: Field Notes From The Demo

Field Note 1: static deployment

Background: The first version only needs to prove that sentence cards are useful.

Goal: Ship the app with the smallest deployment surface.

Prompt: Create static HTML pages with dark mode and mobile responsive behavior.

Result: The demo can be opened directly in a browser and shared as files.

Tips:

• Avoid backend work until user accounts or persistence are necessary.
• Use static files for early feedback.
• Keep filenames meaningful.
• Make each article link shareable.
• Package the demo as a zip.

Field Note 2: card consistency

Background: Every article can drift if its cards use different labels.

Goal: Make every article feel like the same learning product.

Prompt: Use the same sentence template for every card.

Result: Learners can move from greetings to workshops without relearning the UI.

Tips:

• Keep label order consistent.
• Use the same tone names.
• Use the same example count.
• Keep grammar explanations short.
• Avoid changing card shape by category.

Field Note 3: accessibility as respect

Background: A language-learning app should be readable for tired event attendees using phones.

Goal: Make content easy to scan, tap, and read.

Prompt: Use readable contrast, large tap targets, semantic headings, and simple navigation.

Result: The app becomes more inclusive without adding complexity.

Tips:

• Use semantic HTML elements.
• Keep contrast high in dark mode.
• Make buttons obvious.
• Avoid tiny text in grammar sections.
• Do not rely only on color for state.

Field Note 4: cultural QA

Background: Politeness is a product requirement, not an optional note.

Goal: Help learners avoid sounding too direct with people they just met.

Prompt: Explain when to use casual speech and when respectful speech is safer.

Result: The app teaches language and social context together.

Tips:

• Explain po in beginner-friendly language.
• Use kayo for respectful or plural “you.”
• Use ninyo for respectful or plural “your.”
• Keep playful Filipino-English clearly informal.
• Ask native speakers to review the final content.

Field Note 5: technical sharing structure

Background: A demo alone is useful, but a technical talk needs a build map.

Goal: Explain how prompts became files, schemas, components, and QA rules.

Prompt: Write the blog post using goal, prompt, result, tips, evidence, and review checks.

Result: The article becomes reusable teaching material for builders who want to create similar learning tools.

Tips:

• Show the prompt.
• Show the schema.
• Show a UI snippet.
• Show demo examples.
• End with a checklist builders can reuse.

Closing Reflection

The best version of this Tagalog learning app is not the most complex version. It is the version a learner can actually use before and during AWS Manila Community Day. Static files, structured prompts, mobile-first layout, and culturally careful sentence cards are enough to create a meaningful demo. Build small, check the language, and let the community learning goal guide the technical design.