How the KKU freshmen welcome system started

I have built the freshmen welcome platform at Khon Kaen University four times — once for each intake from KKU60 through KKU63. Not one of them started with me pitching the idea.

Nobody asked me to build it. Somebody asked me to help.

The first came from a senior I met while serving on a student organization subcommittee. The next came from someone I met at a camp, who later joined the organization themselves and came back to ask. After that it simply became the thing I did each year.

Every one of the four started with someone asking, not with me proposing.

The reason I kept saying yes is duller than it sounds: when I arrived, the university's websites and systems were dated, and I wanted to be one of the people helping move them forward. Volunteering on the welcome system was the nearest place to start.

Four intakes, four rewrites

Each year is a new repository, not last year's with the number changed. The first commit of each lands in May or June — the intake sets the deadline, and the deadline does not move.

1. KKU60 · 2023 — a five-step wizard: fill in details, pick activities, confirm, download an e-ticket. Chakra UI, Formik and Yup, Redux Toolkit.
2. KKU61 · 2024 — the interface moved to MUI, and the code moved into feature folders. Point collection and event registration became the two things it did.
3. KKU62 · 2025 — mobile-first, and the first year with a real staff side: check-in, grouping, and reports broken down by food, health, faculty and club.
4. KKU63 · 2026 — bilingual, server-rendered auth against the university's own login, and sixteen separate domains under one app.

What that looks like as numbers

The jump from 2025 to 2026 is not ambition. It is the year the app stopped being a registration form with extras bolted on and became a set of separate features that happen to share a login.

The stack changed almost every year

Only two things survived all four: Next.js and Firebase. Everything else was replaced at least once.

• Forms — Formik + Yup (2023) → nothing much (2024) → React Hook Form + Zod (2025 onward). Zod earns its place by being the same schema the form and the database write both check against.
• UI — Chakra UI (2023) → MUI (2024 onward), and MUI X for the data grids and charts the staff side needs.
• State — Redux Toolkit (2023–24) → dropped. By 2025 almost all of it was server state, and TanStack Query in 2026 does that job without a store.

And so did the folder layout

2023  src/{components,hooks,redux,services,styles}
2024  src/features/{collect-points,events-registration} + src/shared
2025  src/modules/{freshmen,participant,staff} + src/shared
2026  src/app/[locale] + src/app/api + src/modules/core/{...16}

Three renames of the same idea, each a little less wrong. features/ was better than a flat components/, and modules/ was better than features/ once a module needed its own models, schemas and hooks rather than just its screens.

What 2026 actually does

The current one signs students in against the university's own account system rather than asking them to make another password:

/api/auth/kku/login      → hand off to the university
/api/auth/kku/callback   → come back, mint a session
/api/auth/session        → who is this, server-side
/api/recaptcha/verify    → keep the bots off registration

Behind that sit the features the organizers asked for, each its own module: e-ticket, check-in, point collection, clubs, a campus map, a photo booth, a feedback form, and a sponsor section.

What it looks like

Most students open it on a phone, not a laptop, so the phone layout is the one that gets designed first and tested hardest. 2025 was the year that stopped being an afterthought.

What four years of it taught me

The hard part was never the difficult problems. It was picking up code — usually my own from the year before — and finding the conventions on paper had not held in practice. Which is most of why I now care about the boring things: naming, code review, and writing down why rather than what.

It is also why 2026 is the first year with tests and a written brief for the codebase, sitting next to the code as AGENTS.md.

The four case studies are on the projects page if you want the details of any one year.