Shinhan Scholarship Foundation
신한장학재단 — Multi-role PWA and admin ecosystem: YB (장학생), Mentor (멘토), OB (동문), Admin CRM (74+ pages), and FastAPI backend. Automated reporting, community, mentoring, scholarship management, and design system (tokens, One Shinhan typography).
My Role
UI/UX, Frontend (all 5 roles), OB · Mentor · Admin backend
Core Stack
Next.js, React, PWA (hyphens-shinhan), FastAPI (plimate-server), Supabase
Timeline
2026.01 — 2026.02
Live Project
—
The Challenge
The core problem
The foundation carried a heavy operational burden: manual monthly student report submissions, slow processing, and fragmented engagement. Students had little reason to use the platform beyond mandatory reporting; staff spent hours every cycle on manual workflows.
Product vision
Replace manual workflows with one ecosystem: role-based PWAs for scholars (YB), mentors, and alumni (OB), plus a full admin CRM and shared backend—so reporting is automated and engagement is built in.
What I owned
UI/UX and frontend for all five roles: YB (reports, community, scholarship activities, mentor matching), Mentor (dashboard, calendar, mentees, applications), OB (alumni experience, scoped visibility), Admin (74+ pages: scholars, scholarships, enrollment, content, reports, communication). Backend/API design for OB, mentor, and admin. Design tokens (tokens.json → variables.css), shared components, and consistent patterns across PWA and admin.
Results
~3 hours of backend processing time saved per cycle. Zero manual report submissions. Dual student and admin PWA; five roles with clear flows. Higher engagement and a single, maintainable codebase.
Design system & UI
Token-driven design system: Figma tokens → tokens.json → process-tokens.js → variables.css (font, color, spacing). One Shinhan typography (shinhan-title-1/2), InfoTag/StatusTag, shared Button/Tab/BottomNav. PWA and admin share consistent primitives; admin adds sidebar, command palette (⌘K), and data tables.
Typography
Inter Bold
Inter Medium
Inter Regular
Colors
Primary / Shinhan Blue
#0046FF
Primary gradient
#2E67FF → #6AA3FF
Surface
#F8F8F8
Text
#1a1a1a
Muted
#64748b
Status
green / yellow / blue / grey
System architecture
Five-role ecosystem: PWA (YB/Mentor/OB) with role-based nav and redirects; Next.js admin (hyphens-frontend) with Supabase; FastAPI backend (plimate-server) for users, mentoring, activities, reports, chats, notifications.
PWA (YB · Mentor · OB)
- Single codebase (hyphens-shinhan): (tabs) for YB/OB home, community, mypage, network, scholarship, mentors; (mentor) for mentor dashboard, calendar, mentees.
- Role-based routing: toNavRole(YB | MENTOR | OB); mentor → mentor dashboard; OB → scholarship tab hidden.
- Maintenance (reports, income, GPA, activity), mentor matching (survey, recommendations, requests), community (feed, notices, groups), push notifications.
Admin (Next.js)
- 74+ admin pages: dashboard, content (notices, resources, gallery, press, foundation), system (admins, settings, codes, schools), scholars (all/general/merit/law/exchange, boards, PC applications), scholarships (grants, tuition), enrollment (leave/return), programs, communication (SMS), reports.
- Supabase auth + RLS; collapsible sidebar, command palette (⌘K), task center; Excel export, filters, modals.
Backend (FastAPI)
- plimate-server: users, mentoring (requests, recommendations, survey), activities, reports, mandatory, academics, grades, chats, notifications, follows, clubs, councils, OCR.
- Supabase as DB; pywebpush for push; structured APIs for PWA and admin consumption.
Scholar experience
Home with gradient and shortcuts, scholarship maintenance and reports, community feed and notices, and mentor matching. Structured submissions replace manual monthly reporting.
Admin CRM
Dashboard, student management, and messaging. Scholars, scholarships, content, and system settings in one place with command palette and task center.
Project impact
Transformed manual monthly reporting into an automated, role-aware platform. ~3 hours of backend processing saved per cycle; zero manual report submissions; dual PWA + admin with consistent design and clean code structure across all five roles.
~3h
Processing time saved
5
Roles (YB · Mentor · OB · Admin · Backend)
74+
Admin pages
0
Manual report submissions
Reflection
I’d introduce E2E tests per role early and document the token pipeline (Figma → tokens.json → variables.css) for future designers. Leading UI/UX and frontend across five roles and a shared design system was a major learning experience.