---
title: "Yokohama Stadium — Official Site & Live Feed — Tran Manh Tuan"
description: "The official website of Yokohama Stadium (Hamasta) with a live play-by-play system — static-first on a CDN, event-driven serverless pipeline on Google Cloud and AWS."
canonical: "https://tmtuan.dev/en/projects/yokohama-stadium"
language: "en"
image: "https://tmtuan.dev/_img/projects/yokohama-stadium/yokohama-stadium.54312937-og.jpg"
tokens: 1232
---

# Yokohama Stadium

**Yokohama Stadium ("Hamasta")** is Yokohama's iconic baseball stadium and the home ground of the **Yokohama DeNA BayStars**. The official website **[www.yokohama-stadium.co.jp](http://www.yokohama-stadium.co.jp)** has to meet four requirements: the operations team updates news, events, in-stadium dining and sponsor information without asking a developer; fans follow the game as it happens on the stadium's official channel; contact requests and group bento orders arrive in line with the stadium's advance-booking rules; and the site stays up on match days — when traffic spikes — with no security gaps.

The site is built with **Nuxt / Vue** as a fully static build (SSG) served through a CDN: there is no origin server to overload or attack, and pages load fast even when the whole stadium opens their phones at once. Content lives in **Contentful** across 16 content types — news, events, food shops, sponsors and more; drafts appear on a staging environment for review, clicking Publish triggers an automatic build and deployment to production, and all content is sanitised (DOMPurify) before rendering to strip anything malicious.

**Hamasta Sokuhou (速報)** — live play-by-play coverage — is an event-driven serverless pipeline (**Firebase Functions v2** triggered by Cloud Storage/Firestore) that runs through the whole game without an operator: it ingests the provider's XML match feed and converts it automatically, including the special Japanese characters (外字) that ordinary systems tend to garble; it parses the score, ball/strike/out (BSO) counts and starting line-ups into the match report shown on the site. Hash- and version-based guards stop stale data from overwriting fresh data, so fans never see the score "run backwards". Operators adjust pitcher information right inside Contentful through a custom extension, and Slack raises an alert when the data source changes.

The contact form covers 6 request categories, each with its own template. Group bento orders are validated against the advance-booking deadline in business days, Japanese public holidays included — an order past its deadline is rejected at the form, so nothing has to be handled manually. Customers receive automatic confirmation emails and management gets notifications via **AWS SES**; bots are blocked with **Google reCAPTCHA Enterprise** authenticated through cloud service identity (IAM), so no secret key has to be stored. The API (Node.js/Express, input validation with Zod) is covered by 471 automated tests.

Security is layered: staging is reachable only from allowed IPs, with real-IP detection that resists header spoofing; every code change automatically passes three scans — library vulnerabilities (Trivy), source-code security issues (Semgrep, with custom rules written because the stock rulesets cannot scan .vue files) and leaked secrets (Gitleaks); supply-chain attacks are countered by refusing packages published less than 7 days ago and verifying the checksum of every scanning tool before it runs. The system operates across **Google Cloud + AWS**, and a security audit was performed with the findings remediated.

## Details

- **Role:** Technical Lead
- **Website:** [www.yokohama-stadium.co.jp/](https://www.yokohama-stadium.co.jp/)

## Technology

- Nuxt
- Vue
- TypeScript
- Contentful
- Node.js
- Express
- Firebase Functions
- Firestore
- Firebase Hosting
- Cloud Run
- AWS SES
- reCAPTCHA
- Github Action
- Docker
- Trivy
- Semgrep
- Gitleaks

## Services this project shows

- [Corporate & Content Web Platforms](https://tmtuan.dev/en/services/web-platforms)
- [Cloud Infrastructure](https://tmtuan.dev/en/services/gcp-cloud-infrastructure)

## Related articles

- [Docs-as-code Knowledge Base + Context Graph for a 15-project portfolio](https://tmtuan.dev/en/articles/knowledge-base-docs-as-code-context-graph)
- [How I Traced a Googlebot-only HTTP 500 Across Next.js, Cloud Run and the Hosting Edge](https://tmtuan.dev/en/articles/googlebot-500-firebase-hosting-nextjs)

## Structured data (JSON-LD)

```json
{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://tmtuan.dev/en/projects/yokohama-stadium#webpage","url":"https://tmtuan.dev/en/projects/yokohama-stadium","name":"Yokohama Stadium — Official Site & Live Feed","description":"The official website of Yokohama Stadium (Hamasta) with a live play-by-play system — static-first on a CDN, event-driven serverless pipeline on Google Cloud and AWS.","inLanguage":"en","isPartOf":{"@id":"https://tmtuan.dev/#website"},"about":{"@id":"https://tmtuan.dev/#person"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://tmtuan.dev/en"},{"@type":"ListItem","position":2,"name":"Projects","item":"https://tmtuan.dev/en/projects"},{"@type":"ListItem","position":3,"name":"Yokohama Stadium","item":"https://tmtuan.dev/en/projects/yokohama-stadium"}]}]}
```