Deep Dive Development Flow for a Tagalog Learning App for AWS Manila Community Day

Disclaimer

Purpose: This static app is an educational prototype for language practice and technical sharing. It helps learners prepare polite Tagalog phrases for AWS Manila Community Day while showing builders how the generator works.

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.

Review Requirement: Language content, especially cultural and polite Tagalog explanations, should be reviewed by native speakers before production use.

Demo

Lagyan po ng yelo.

Grammatical Breakdown

• Lagyan: Means to put or add something to a place or item.
• po: Polite marker for respectful speech.
• ng: Linker or marker often used before the object.
• yelo: Means "ice."

Pronunciation Guide

It is pronounced word by word as:

lahg-yahn poh ngah yeh-loh.

• Lagyan: lahg-yahn.
• po: poh.
• ng: ngah.
• yelo: yeh-loh.
  Keep the request short and soft, especially when ordering from a vendor.

Content Snapshot

Natural Tagalog: Lagyan po ng yelo.
Polite Tagalog: Lagyan po ng yelo.
Extra Example 1: Sa palengke, lagyan po ng yelo.
Extra Example 2: Ganito na lang, lagyan po ng yelo.
Related Market Example: Konting asukal lang po.

Table of Content

Part 1: Treat Content As The Product Contract

This section explains how article metadata, categories, slugs, and summaries become the first API of the static site.

Part 2: Use Sentence Banks As Reusable Source Data

This section shows how base sentence tuples support natural Tagalog, polite Tagalog, friendly Filipino-English, playful Filipino-English, and tone labels.

Part 3: Expand Small Inputs Into A Larger Learning Deck

This section explains how a small sentence bank can generate 40 cards per article by combining base phrases with context variants.

Part 4: Render Static HTML From Structured Data

This section explains how the generator turns content objects into article pages, navigation lists, sentence cards, and a landing page.

Part 5: Package And Verify The Demo

This section dives into zip generation, summary word-count correction, mobile CSS checks, card-count checks, and publication-safe validation.

Part 6: Model The Learning Product In Plain Data

This section explains how the project models articles, sentence banks, contexts, examples, grammar, and pronunciation in plain Python data structures.

Part 7: Generate Large Learning Sets Deterministically

This section shows how deterministic expansion creates many learning cards while preserving consistent tone and structure.

Part 8: Add Grammar, Examples, And Pronunciation Helpers

This section dives into grammar breakdown, example selection, and pronunciation guide generation.

Part 9: Build A Responsive Static Learning Interface

This section explains how the generator builds a dark-mode, responsive, article-based learning interface.

Part 10: Turn QA And Release Into Part Of The Demo

This section explains how packaging and checks turn a generated prototype into a shareable technical demo.

Part 1: Treat Content As The Product Contract

Goal

Create a predictable content contract before writing UI logic. The generator defines ten articles with id, slug, title, category, and summary. This makes each article addressable, linkable, and renderable.

Development skill

The development skill is schema-first thinking. Even without a database, the article list acts like an API. Every downstream step depends on stable keys:

{
  "id": 1,
  "slug": "community-greetings-introductions",
  "title": "Community Day: Greetings and Respectful Introductions",
  "category": "Community Day",
  "summary": "Practice polite greetings..."
}

Prompt

Create a static learning site with 24 article pages.
Each article needs:
- id
- slug
- title
- category
- 20-word summary
- 40 sentence cards

Use 11 Community Day articles, 8 Friendship articles, and 5 Manila Daily articles.

Result

The generator can produce predictable file names like:

article-1-community-greetings-introductions.html
article-3-community-workshops-learning.html
article-5-community-volunteers-time-goodbye.html

This naming pattern is useful for technical sharing because the file name itself tells the route, article number, and topic.

Tips

• Use slugs instead of raw titles for file names.
• Keep article IDs numeric for ordering.
• Keep categories explicit for UI badges.
• Validate summaries separately from article body.
• Make the metadata readable enough to review without running the app.

Part 2: Use Sentence Banks As Reusable Source Data

Goal

Store learning content as compact source data before expanding it into full cards. Each sentence tuple carries six useful fields:

English input
Natural Tagalog
Polite Tagalog
Friendly Filipino-English
Playful Filipino-English
Tone

Development skill

The skill is content normalization. Instead of writing 400 full HTML cards by hand, the source uses compact tuples and lets rendering functions add grammar, examples, cultural context, and pronunciation.

Prompt

Create event-ready base sentence banks.
For each sentence, provide:
- English input
- Natural Tagalog
- Polite Tagalog
- Friendly Filipino-English
- Playful Filipino-English
- Tone

Include greetings, directions, workshops, networking, volunteers, waiting time, and goodbye.

Demo examples

English: Sit for a moment if you feel dizzy.
Natural Tagalog: Umupo ka sandali kung nahihilo ka.
Polite Tagalog: Umupo po kayo sandali kung nahihilo kayo.
Friendly Filipino-English: Sit muna po kung dizzy.
Playful Filipino-English: Umupo muna, easy lang all right.
Tone: caring health advice

English: Thank you for being my safe friend.
Natural Tagalog: Salamat sa pagiging ligtas kong kaibigan.
Polite Tagalog: Salamat sa pagiging ligtas ko pong kaibigan.
Friendly Filipino-English: Thank you po for being my safe friend.
Playful Filipino-English: Safe friend ka, thank you all right.
Tone: gentle friendship care

Result

The content model supports both practical event speech and tone teaching. A learner sees the respectful sentence beside casual and playful variants.

Tips

• Put natural Tagalog before playful output.
• Use po, kayo, and ninyo where the situation requires respect.
• Keep playful expressions clearly informal.
• Add tone labels early.
• Build enough sentence categories to test the whole event journey.

Part 3: Expand Small Inputs Into A Larger Learning Deck

Goal

Turn 10 base sentences into 40 cards per article by combining each base sentence with four context variants. Community Day contexts include morning registration, workshop start, meeting volunteers, and post-session use.

Development skill

The skill is controlled expansion. The generator multiplies content without making the output random. Every generated card still follows the same sentence-card template.

Prompt

Expand each article from 10 base sentences into 40 learning cards.
Use four context variants for each base sentence.
Keep the sentence text clear and place situational detail in the background context.

Implementation pattern

def expand(base, article_id):
    contexts = community_contexts if article_id <= 5 else friendship_contexts
    cards = []
    for sentence in base:
        for context in contexts:
            cards.append({
                "num": len(cards) + 1,
                "background": "Use this sentence in this context...",
                "english": sentence[0],
                "natural": sentence[1],
                "polite": sentence[2],
                "friendly": sentence[3],
                "playful": sentence[4],
                "tone": sentence[5]
            })
    return cards[:40]

Result

The site now scales to 960 sentence cards without losing structure. This is a practical demonstration of how AI-assisted content can be shaped into a deterministic product.

Tips

• Expand context, not random wording.
• Keep the original sentence stable for memorization.
• Use deterministic card numbers.
• Limit generated cards with [:40] to prevent overflow.
• Review a sample from each category after expansion.

Part 4: Render Static HTML From Structured Data

Goal

Render every article page from the same HTML function. The generator creates article navigation, hero content, metadata badges, sentence cards, previous and next links, and mobile controls.

Development skill

The skill is template rendering without a framework. Python string templates, HTML escaping, and small helper functions are enough to build a complete static site.

Prompt

Generate one HTML page per article.
Desktop UI:
- Left article list
- Right article content

Mobile UI:
- Content first
- Open Articles List button
- Drawer-style article list

Use dark mode and responsive CSS.

Rendering responsibilities

page_html(article)
  -> active navigation
  -> hero section
  -> sentence cards
  -> previous and next links
  -> mobile drawer button

sentence_card_html(card, article)
  -> background context
  -> English input
  -> natural Tagalog
  -> polite Tagalog
  -> friendly Filipino-English
  -> playful Filipino-English
  -> cultural context
  -> grammar
  -> examples
  -> pronunciation

Result

The HTML output is consistent because every article uses the same renderer. This avoids the common demo problem where each page slowly drifts into a different layout.

Tips

• Use html.escape() for generated content.
• Keep CSS variables for dark mode colors.
• Use a single navigation renderer for all pages.
• Add semantic article cards.
• Keep JavaScript small and limited to the mobile drawer.

Part 5: Package And Verify The Demo

Goal

Create a zip file and run consistency checks before sharing. The packaging script updates summaries to exactly 20 words, rewrites HTML files, creates tagalog_static_html_site.zip, and prints verification results.

Development skill

The skill is release hygiene. A static site still needs a release pipeline: patch, package, verify, and review.

Prompt

Before publishing, verify:
- every article has 40 sentence cards
- summaries have exactly 20 words
- mobile CSS exists
- output does not include forbidden internal references
- zip file includes all HTML pages

Verification pattern

checks[p.name] = {
    "sentence_cards": text.count('class="sentence-card"'),
    "mentions_readme": bool(re.search(r"readme", text, re.I)),
    "has_mobile_css": "@media (max-width: 860px)" in text,
}

Demo anchor regression set

Use these latest HTML examples as a regression set whenever the generated site changes:

Tagalog: Magpahinga muna tayo sa lilim.
English: Let us rest in the shade first.
Checks: health/safety context, natural conversation line, and no duplicated Extra Example pattern.

Tagalog: Umupo ka sandali kung nahihilo ka.
English: Sit for a moment if you feel dizzy.
Checks: caring advice, beginner-friendly wording, and practical Manila daily use.

Tagalog: Paki-check po kung pumasok ang bayad.
English: Please check if the payment came in.
Checks: polite request, payment context, and clear Extra Example wording.

Result

The demo becomes safer to share because the final step proves the expected content exists. This is especially important for technical sharing because the audience can see not only the demo, but also the build discipline behind it.

Tips

• Print JSON checks after every release build.
• Treat word-count requirements as testable constraints.
• Zip the exact files you want to distribute.
• Sort files so the package is predictable.
• Run checks after patching, not before.

Part 6: Model The Learning Product In Plain Data

Goal

Represent a learning product with simple Python structures that are easy to inspect, change, and render.

Development skill

The key skill is using dictionaries and tuples as a lightweight content database. The project uses:

articles: list of article metadata
community_sets: event phrase banks
friendship_sets: emotional phrase banks
community_contexts: practical event situations
friendship_contexts: emotional speaking situations
pron_map: pronunciation hints

Prompt

Model the learning app content as structured Python data.
Use article metadata for navigation.
Use sentence banks for learning cards.
Use context arrays to expand each base sentence.
Use helper maps for pronunciation and grammar.

Why this matters

This approach makes the system explainable. During a tech sharing session, a builder can point to one data structure and explain how it becomes navigation, article content, and sentence cards.

Tips

• Keep article metadata separate from sentence content.
• Keep event categories separate from friendship or poetic categories.
• Use tuples only when field order is stable.
• Use dictionaries when keys need to be self-documenting.
• Promote the structure to JSON later if non-Python users need to edit it.

Part 7: Generate Large Learning Sets Deterministically

Goal

Generate a large learning set without losing consistency.

Development skill

The skill is deterministic generation. The app does not ask AI to freely invent every final page at runtime. It defines base data, expands it, and renders static output.

Prompt

Use deterministic generation instead of manual duplication.
For every base sentence, generate four context-aware cards.
Keep the output order stable.
Assign card numbers automatically.
Return exactly 40 cards per article.

Implementation concept

for base_sentence in base_sentences:
    for context in contexts:
        create_card(base_sentence, context)

Result

The app can grow while staying reviewable. If a translation needs improvement, the developer edits the base sentence once and regenerates the site.

Tips

• Store the source phrase once.
• Generate repeated layouts automatically.
• Keep card numbers deterministic.
• Avoid randomization in published learning content.
• Use build checks to confirm exact counts.

Part 8: Add Grammar, Examples, And Pronunciation Helpers

Goal

Add learning value beyond translation by generating grammar notes, extra examples, and pronunciation hints.

Development skill

The skill is rule-based augmentation. The generator checks the English input and natural Tagalog to decide which grammar explanation to attach.

Prompt

Create helper functions that add grammar and examples based on sentence intent.
If the sentence is about thanks, explain Salamat, po, and sa.
If it asks where, explain Saan, po, and ang.
If it is a polite request, explain Puwede, Paki-, po, and ba.
If it is about waiting, explain Hintayin, Papunta, Pasensya, na, and po.

Example helper behavior

Sentence: Let us rest in the shade first.
Grammar:
- Salamat: thank you
- po: politeness marker
- sa: for, in, at, or to depending on context

Sentence: Sit for a moment if you feel dizzy.
Grammar:
- Puwede / Paki-: may, can, or please
- po: polite marker
- ba: question marker

Demo examples

The helper system repeatedly uses event-safe 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.

Result

The app teaches patterns, not only phrase pairs. This is more valuable for a technical demo because it shows how a simple rule layer can improve learning content.

Tips

• Keep helper rules transparent.
• Use simple grammar explanations for beginners.
• Do not overclaim linguistic accuracy.
• Add native-speaker review for grammar notes.
• Let helper functions create consistency, not final authority.

Part 9: Build A Responsive Static Learning Interface

Goal

Generate a usable static site that works on desktop and mobile.

Development skill

The UI skill is responsive static composition. The app uses:

Desktop: sidebar navigation + article content
Mobile: content first + article drawer button
Dark mode: CSS variables and readable contrast
Cards: repeated sentence-card component
Navigation: active article link and previous/next links

Prompt

Create a dark-mode static HTML learning site.
Desktop layout should show article navigation on the left and content on the right.
Mobile layout should show content first and an Open Articles List button.
Use semantic cards and keep the UI readable for long language-learning content.

CSS concept

:root {
  --bg: #090b10;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --brand: #38bdf8;
  --border: #273449;
}

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

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

  .content {
    order: 1;
  }

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

Result

The app is usable as a browser-only learning tool. For AWS Manila Community Day preparation, this matters because learners may practice on phones while traveling, waiting, or reviewing before a session.

Tips

• Put the learning content before navigation on mobile.
• Use large touch targets.
• Keep grammar sections scannable.
• Use dark mode carefully, not decoratively.
• Keep JavaScript minimal.

Part 10: Turn QA And Release Into Part Of The Demo

Goal

Make the generated site reliable enough to share.

Development skill

The skill is automated consistency checking. The packaging script checks for:

sentence card counts
mobile CSS marker
forbidden internal reference mentions
summary word counts
zip creation

Prompt

Create a release script that:
- patches article summaries to exactly 20 words
- rewrites all HTML files
- packages the files into a zip
- prints JSON checks for every page

Release pattern

files = list(Path('.').glob('*.html'))

for page in files:
    text = page.read_text(encoding='utf-8')
    # patch content
    page.write_text(text, encoding='utf-8')

with zipfile.ZipFile(zip_name, 'w', zipfile.ZIP_DEFLATED) as z:
    for page in sorted(files):
        z.write(page.name)

Result

The final artifact is not just a set of generated pages. It is a checked and packaged build. That distinction matters in a technical sharing session because it shows a professional release mindset.

Tips

• Print validation output as JSON.
• Check requirements after every patch.
• Package only intended files.
• Keep release scripts small and auditable.
• Use checks as talking points in the tech share.

Field Notes

Content Contract Before UI

Background: The app now needs 24 articles, 960 cards, summaries, categories, tone variants, and 2,680 unique Extra Example lines.

Goal: Prevent hand-authored page drift.

Prompt: Define article metadata and sentence tuples before rendering HTML.

Result: The same generator can render the whole site.

Review check: Can every article be rendered from id, slug, title, category, summary, and cards?

Controlled Expansion

Background: Writing 40 unique cards manually for every article is slow and inconsistent.

Goal: Expand 10 base sentences into 40 cards safely.

Prompt: Combine base sentences with four contexts while keeping the sentence stable.

Result: Each article reaches the required card count without random structure.

Review check: Does every article show exactly 40 cards?

Release Script As QA

Background: The first generation can miss word-count or publication rules.

Goal: Patch and verify final output before packaging.

Prompt: Replace summaries, zip files, and print checks.

Result: The final build has 20-word summaries, mobile CSS, and no forbidden internal reference.

Review check: Does the build log show summary counts, mobile CSS, and card counts?

Plain Python Can Be A Static Site Generator

Background: The app needs many pages but does not need runtime server logic.

Goal: Generate HTML once and serve it anywhere.

Prompt: Use Python to create article pages and an index page from structured content.

Result: The site becomes easy to package, inspect, and share.

Review check: Can the site be opened without a backend?

Helper Functions Are Product Decisions

Background: Grammar breakdown and pronunciation are not raw data; they shape learner understanding.

Goal: Encode beginner-friendly explanations consistently.

Prompt: Add helper functions for pronunciation, grammar breakdown, examples, and related patterns.

Result: Every card gets learning support without hand-writing the same explanation repeatedly.

Review check: Do helper explanations match the sentence intent?

QA Is Part Of The Story

Background: A generated demo can fail silently if counts or mobile rules are wrong.

Goal: Make validation visible.

Prompt: Print checks for card count, mobile CSS, and forbidden terms.

Result: The build output becomes evidence that the demo meets requirements.

Review check: Does the final JSON check show expected values?

Technical Sharing Should Show The Flow

Background: Builders learn faster when they see how files, prompts, schemas, and checks connect.

Goal: Present the project as a repeatable build pattern.

Prompt: Explain the flow from data model to generated pages to release zip.

Result: The talk becomes useful beyond this Tagalog app.

Review check: Can another builder reuse the same flow for another learning topic?

Closing Reflection

This development flow is valuable for technical sharing because it shows a complete path from content idea to distributable static site. The important lesson is not only how to write HTML or Python. The lesson is how to design a content contract, generate consistent pages, validate requirements, and package the result with confidence. The engineering skill behind the Tagalog learning app is turning a cultural learning goal into a repeatable content pipeline where data modeling, deterministic generation, helper functions, responsive rendering, and release validation work together.