Superapp / Product requirements / news

Multi-language News — product requirements

Version 2.06 features24 requirements8 Must Open appJSONMarkdown

Multi-language News is a news portal in eight languages — Tiếng Việt, English, 中文, Français, ไทย, 日本語, Deutsch and العربية (right-to-left). Each language has a home page with a top story and section blocks, ten section pages, article pages with related stories, search tuned to its script, local date formats and a language switcher. The catalogue is 28 Vietnamese articles, 8 of which are translated into every other language; a small JSON API serves all of it.

Problem. Readers want today's news grouped by topic, in their own language and script, and want to find stories without typing every accent, tone mark or script variant exactly.

Users

Goals

Out of scope

Contents

Home page

Header, section navigation, top story and section blocks.

FR-HOM-01
Must
The home page shows the header, the section nav, the top story, side headlines, four section blocks and the footer.
  • Title "Multi-language News - Tin tức Việt Nam mỗi ngày"; html lang="vi"
  • Header: logo link, current date as "<weekday>, d/m/yyyy, hh:mm (GMT+7)", search box "Tìm kiếm"
  • Nav "Chuyên mục": home icon then Thời sự, Thế giới, Kinh doanh, Khoa học công nghệ, Giải trí, Thể thao, Pháp luật, Giáo dục, Sức khỏe, Du lịch
  • Footer "© 2026. Toàn bộ bản quyền thuộc Multi-language News (mô phỏng)."
FR-HOM-02
Must
Stories are ordered newest first: the large top story is the newest article, followed by three side headlines.
  • Top story: "Hà Nội phân luồng giao thông phục vụ thi công cầu Trần Hưng Đạo"
  • Side headlines: "TP HCM mở rộng tuyến buýt điện…", "Cao tốc Bắc - Nam đoạn qua Khánh Hòa…", "Bộ Giao thông Vận tải đề xuất…"
  • Section blocks Thời sự, Thế giới, Kinh doanh, Khoa học công nghệ show two stories each

Section pages

One page per section.

FR-SEC-01
Should
A section page lists only its own stories and marks the section active in the nav.
  • "Thể thao" opens /news/the-thao, title "Thể thao - Multi-language News", heading "Thể thao", exactly 2 stories
  • The active nav link has aria-current="page" and is bold
FR-SEC-02
Should
Story counts per section are fixed and total 28.
  • Thời sự 6; Thế giới 4; Kinh doanh 4; every other section 2
  • GET /api/news/articles reports total 28
FR-SEC-03
Could
An unknown section or article id returns a real HTTP 404 page inside the site chrome.
  • Heading "404 - Không tìm thấy trang"; header and nav still present
  • Applies to /news/khong-ton-tai and /news/abc-9999999.html

Article pages

Story detail, canonical URLs and related stories.

FR-ART-01
Must
An article page shows breadcrumb, time, headline, bold lead, body and related stories.
  • URL form /news/<slug>-<id>.html; title "<headline> - Multi-language News"
  • Breadcrumb "Thời sự" links to /news/thoi-su; time "Chủ nhật, 18/10/2026, 08:23 (GMT+7)" for the top story
  • Body of three paragraphs
  • "Tin liên quan" shows three other stories from the same section, never the current one
FR-ART-02
Should
The article body reproduces proper nouns with their correct capitals; where the first paragraph quotes the headline, "Hà Nội" keeps its capital letters.
  • The first paragraph of the top story contains "Hà Nội phân luồng giao thông…" with "Hà" capitalised
FR-ART-03
Could
An article URL whose id is right but whose slug is wrong redirects to the canonical URL.
  • /news/wrong-slug-4800100.html redirects (301 or 302) to the canonical top-story URL

Search

Accent- and case-insensitive Vietnamese search.

FR-SRH-01
Must
The header search lists matching stories and keeps the query in the box.
  • "giao thông" goes to /news/tim-kiem?q=giao+th%C3%B4ng with heading "Kết quả tin tức cho từ khóa giao thông"
  • 6 matching stories; the search box still contains "giao thông"
FR-SRH-02
Should
Search folds diacritics and đ and is case-insensitive.
  • "giao thong" and "GIAO THONG" return the same 6 stories as "giao thông"
  • "duong" and "đường" return the same 3 stories
FR-SRH-03
Could
A search that matches nothing, including an empty query, shows "Không tìm thấy kết quả phù hợp." and no stories.

Languages

Eight locales, switcher, hreflang, local dates, RTL and per-script search.

FR-LOC-01
Must
Every page has a language bar listing Tiếng Việt, English, 中文, Français, ไทย, 日本語, Deutsch and العربية by native name. Vietnamese lives at /news/; every other language at /news/<code>/ with fully translated chrome.
  • Each link carries hreflang and lang; the current language has aria-current
  • /news/en/ has html lang="en", title "Multi-language News - Daily news in your language", nav Current affairs … Travel and footer "© 2026 Multi-language News (simulated). All rights reserved."
  • The top story is the newest translated story; section blocks are the first four sections that have stories
  • /news/en redirects 301 to /news/en/; /news/vi/ redirects to /news/; an unknown code is 404
FR-LOC-02
Must
The language links keep the reader's place: on a translated article they open the same article, on a section the same section, on search the same query.
  • Latin-script languages (en, fr, de) use /news/<code>/<slug>-<id>.html; zh, th, ja and ar use /news/<code>/<id>.html
  • From the top story, "Français" opens /news/fr/hanoi-devie-la-circulation-pour-les-travaux-du-pont-tran-hung-dao-4800100.html and "日本語" opens /news/ja/4800100.html
  • /news/en/sports → "Deutsch" → /news/de/sports
FR-LOC-03
Should
Article pages declare their language versions with <link rel="alternate" hreflang>, plus x-default pointing at the Vietnamese original.
  • Story 4800100: alternates vi, en, zh-Hans, fr, th, ja, de, ar and x-default
  • A Vietnamese-only story has only vi and x-default
FR-LOC-04
Should
Publication times use each language's own date convention, in GMT+7.
  • en "Sunday, October 18, 2026, 8:23 AM (GMT+7)"
  • fr "dimanche 18 octobre 2026, 08:23 (GMT+7)"; de "Sonntag, 18. Oktober 2026, 08:23 (GMT+7)"
  • zh "2026年10月18日 星期日 08:23 (GMT+7)"; ja "2026年10月18日(日) 08:23 (GMT+7)"
  • th "วันอาทิตย์ที่ 18 ตุลาคม 2569 เวลา 08:23 น. (GMT+7)" (Buddhist era)
  • ar "الأحد، ١٨ أكتوبر ٢٠٢٦، ٠٨:٢٣ (GMT+7)" (Arabic-Indic digits)
FR-LOC-05
Must
Every Arabic page, error pages included, is rendered right-to-left with the layout mirrored.
  • html lang="ar" dir="rtl" on home, section, article, search and 404 pages
  • Logo on the right, search on the left, side headlines to the left of the top story
FR-LOC-06
Should
A story requested in a language it is not translated into returns HTTP 404 and links to the languages it does exist in.
  • /news/en/4800102.html: 404, "404 - Page not found", "This story is available in: Tiếng Việt" linking to the Vietnamese URL
  • Vietnamese section slugs under another language (/news/en/the-thao) are 404
FR-LOC-07
Should
Search folds what each script's readers leave out: case and accents for Latin, typographic apostrophes and ligatures for French, ß for German, full/half-width forms for CJK, and tashkeel, tatweel and hamza variants for Arabic.
  • en "AIRPORT" and fr "aeroport" find the Tan Son Nhat airport story; fr "l'ONU" finds "L’ONU appelle…"
  • de "Strasse" finds "Hanoi sperrt Straßen…"
  • ja half-width "ﾊﾉｲ" finds "ハノイ、…"
  • ar "تحول" and "الامم" find "تحوّل" and "الأمم"
FR-LOC-08
Could
German search treats the transliterations ue, oe and ae as ü, ö and ä.
  • de "fuer" returns the same three stories as "für"
FR-LOC-09
Should
Outside Vietnamese, section pages use English slugs, list only translated stories and show a localised empty message when a section has none.
  • /news/en/sports: title "Sports - Multi-language News", 1 story
  • /news/en/law: "No stories in this section yet."; /news/de/law: "In diesem Ressort gibt es noch keine Artikel."

Articles API

JSON endpoints for sections, articles and languages.

FR-API-01
Could
GET /api/news/sections lists 10 sections; GET /api/news/articles supports section and accent-insensitive q filters, combined.
  • section=the-thao: total 2
  • section=kinh-doanh&q=gia: total 2
  • Each article has id, section, title, lead, body, time and url (/news/<slug>-<id>.html)
FR-API-02
Could
GET /api/news/locales lists the eight languages; articles and sections accept ?lang=<code> (default vi) and reject unknown codes.
  • locales: code, tag, name, dir (ar "rtl"), home, search and article count (vi 28, others 8)
  • articles?lang=ja: total 8; each item adds lang and translations
  • sections?lang=fr: English slugs with French names
  • lang=xx: HTTP 400 {error:"validation"}

Non-functional requirements

NFR-01
Must
Search input is echoed as text and escaped, both in the heading and the search box; markup is never rendered.
  • ?q=<b>x</b> shows the literal <b>x</b>
NFR-02
Could
The section nav stays on top while scrolling. At 375 px the top story stacks into one column, the header date is hidden, the nav scrolls sideways inside itself and the page has no horizontal scroll.