A multilingual website for the Malaysia office of the World Association of Uzbek Youth
WAYU Malaysia is the website of the Malaysia office of the World Association of Uzbek Youth, the association whose main site is wayu.uz. It serves Uzbek students and young people who plan to study in Malaysia or already live there, along with the universities, agencies and partners the office works with. We designed and built it as a multilingual community organization website with an embedded CMS, in Uzbek, Malay, English and Russian.
The site answers the questions a student asks before and after arrival: how to choose a university, how the visa and EMGS process works, and where to find the community. It also gives the office a single admin panel for content, members, event attendance and incoming requests.
Key features
- Four languages, one content model — every page lives under a locale prefix (
/uz,/ms,/en,/ru), with Uzbek as the default. A smallpickhelper resolves both four-language and three-language dictionaries, so Malay falls back to English wherever a string has not been translated yet instead of rendering empty. - Study and living guide — a step-by-step explainer of the student visa and EMGS process, a partner-university directory with program, tuition and intake fields, a pre-arrival section, and links to official sources such as Education Malaysia Global Services and the Immigration Department of Malaysia.
- Departments — four community departments (sports, digital innovation and technology, partnerships and sponsorship, media and communications), each with its own page and a coordinator spotlight that rotates to whoever has been shown least recently.
- Events calendar — upcoming and past events with category filters, individual event pages and a registration form.
- News and memorandum register — a news section plus a register of cooperation agreements. Each row opens a four-language write-up with a cover photo and the public sources it is based on.
- Front-desk chat assistant — a site-wide widget that matches a visitor's message against intents such as joining, departments, events, studying, living, cooperation and contact, then replies in the active language with links to the right page. It is deliberately rule-based: there is no LLM behind it and nothing typed into it is sent anywhere.
- Accessibility panel — color, grayscale and inverted display modes, a hide-images option, a screen-reader mode and adjustable font size, applied site-wide and remembered between visits.
- Site search — a search overlay backed by a client-side index built from the same navigation, department, event and news data the pages render, so results cannot drift out of sync with the content.
Architecture and tech stack
Frontend
The public site is a Next.js 16 App Router application on React 19, styled with Tailwind CSS and animated with GSAP. The home page opens with a split-panel hero that joins Uzbekistan and Kuala Lumpur imagery, followed by events, community and introduction sections. Every route sits under a dynamic [lang] segment, so each language version has its own URLs.
CMS and data
Payload CMS 3 is mounted inside the same Next.js app at /admin rather than hosted separately, backed by PostgreSQL and the Lexical rich-text editor. The content model covers 15 collections, including Departments, Events, Coordinators, Universities, Announcements, Partners, News, Timeline, Resources, Projects, Members, Attendance and Support requests, plus Home, Guide and Settings globals. Editorial content is localized in all four languages. The SEO plugin adds per-page meta fields, and the import-export plugin handles bulk data. Email goes through Nodemailer only when SMTP is configured, so local development and a first server boot never fail on a missing mail host.
Roles and member KPI
The admin panel is grouped into Content, Operations and Administration. Administrators can do everything, editors manage content and operational data, and department coordinators see only their own department's members, attendance and events, with content read-only. A dashboard summarizes open support requests, upcoming events, members, active members and each department's contribution.
Member engagement is scored by a Payload hook. Each attendance record carries a role (attendee, volunteer, speaker or organizer) worth 1, 3, 5 or 8 points by default, and the weights can be changed from the Settings global. The score, events attended, events organized and last activity are stored on the member row, so the admin list stays sortable without a per-row aggregate query. The hook's own writes are flagged to skip recalculation, so it never re-triggers itself.
Content migration
The site's content started as a structured content file. A migration script imports it into the database and is safe to re-run, and a verification script checks the result. In the current build the public pages still render from that file, and switching them over to read from the database is scoped as a separate step.
Our role
We handled design and development end to end over two weeks in August 2026. On the first day we set up the Next.js site and design sources, the Payload CMS schema, localization and content migration, and an admin dashboard verified end to end. Over the following days we added the news section, event registration, the memorandum register, the chat assistant, responsive layout fixes and an expanded study guide with pre-arrival information, and we removed personal Telegram contacts from team member profiles.
Related work
WAYU Malaysia brings together our website development, web app development and product design work. For another community platform in Malaysia, see Pitch, our live football tournament platform. For a multilingual product built for Uzbekistan, see Bronjoy.
