WelcomeKitA Club App Used by 45 Members

A Club App Used by 45 Members

WelcomeKit

Background

Attendance for the 45 members of HUFS LIKELION's 13th cohort was kept by staff on a paper roll. As 13th-cohort staff, I planned WelcomeKit, a PWA that handled attendance, team bingo missions, and the club introduction for new members in one app, and led its frontend development. (Mar 2025 – Sep 2025)
- A React 18 PWA. During the 2025 run I made 60 of the 98 frontend commits; in Sep 2026 I built attendance-management improvements for the next cohort on both frontend and backend (Spring) and shipped them to the codebase.

When staff press 'Start QR check', a server-generated QR code appears, and a member's scan is recorded on the server at once. Scans more than 20 minutes after the session starts are marked late automatically.
Today's roll lists only late or absent members by team and name, and staff can switch a member between absent and late with the 'Edit attendance' button.
On desktop only 'show QR' and 'refresh roll' appear; on mobile only 'check in' does, which separates the staff screen from the member screen.

Missions come from the server and stay hidden on the board; when a team picks a square, the card flips to reveal the mission once staff approve it.
While one square awaits approval, no other square can be picked, so a team can't request several missions at once.

The first screen welcomes the 13th-cohort members, and an introduction page lays out the club's activities, from track-based training (frontend, backend) to hackathons and the teaching volunteer program, so new members can learn the club in one place.
Sign-up, login, and a My Page (profile photo, password change) let every member take part in attendance and missions under their own account.

The app prompts members to add it to their home screen (not shown once installed), and a service worker caches the app shell so it opens like an app at the session.

Built the attendance-edit screen and API so a status staff choose is saved on the server along with who changed it.
A fixed QR code could be screenshotted and shared, so each QR now carries a one-time token that expires after 30 minutes or as soon as a new QR is shown. Scanning with the phone's default camera submits attendance directly, and members who aren't logged in return to the same screen after logging in.
Members can see their own attendance history on My Page, and staff see per-session attendance and per-member rates with a CSV export. The rate divides by each member's recorded sessions, not all sessions, so a member who joined late isn't counted absent for sessions before they joined.
The screen only decides which menus to show; the server checks permission for edits and statistics, so requests from member accounts are rejected.
The staff statistics, QR, and personal attendance screens above were captured with sample data; the names and numbers are not real records.

All 45 members used it for session attendance and bingo missions, and the paper roll was replaced by automatic QR logging.
During a session, staff only had to check the late and absent members the roll showed, and could fix a wrong record on the spot.