Overview
ACAI is the ASEAN regional knowledge center for active ageing. The site needed to serve two audiences at once: policymakers and researchers looking for publications and events, and older adults reading articles and educational content. I built both the public website and a custom headless CMS for the in-house team to manage content without touching code.
What I built
Public website
- Server-rendered article and publication listings with category filters
- Event calendar with detail pages and RSVP CTA
- Researcher / staff directory and governance pages
- Accessibility controls — adjustable font size persisted per visitor, since a portion of readers are older adults
- Bilingual support (English / Thai) via Next.js App Router locale segments
Headless CMS
- Rich-text authoring with Tiptap — supporting tables, images, links, headings, and inline code
- Image upload to S3 with CloudFront CDN delivery
- JWT-based auth with role-based access for editors
- Draft / published states so editors could schedule content
- Tag management, taxonomy, and bulk actions
Tech stack
- Frontend: Next.js 14 App Router, React 18, Tailwind CSS
- State: Zustand for global state, React Query patterns for server cache
- Backend: AWS Amplify hosting, Lambda + Express API, MongoDB Atlas
- Storage: S3 for assets, CloudFront for global delivery
- Editor: Tiptap (ProseMirror) with custom extensions
My role
End-to-end ownership: requirements gathering with the editorial team, system design, full-stack implementation, deployment, and post-launch handover training. Worked closely with a designer who provided Figma mockups; everything else was mine.
What I learned
Building for accessibility from day one is much cheaper than retrofitting. The font-size control alone made the site usable for the audience it was designed for — and the patterns (focus rings, semantic HTML, keyboard navigation) applied everywhere else for free. Tiptap's extension system is also worth the upfront learning curve when editors need flexibility beyond a basic WYSIWYG.
