Tran Manh Tuan

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 (opens in a new tab) 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.

Image 1 of 5