SIT Club Digital Platform

School Coursework • Year 1

Individual Role: Frontend Developer & UI Designer

A centralized digital platform designed and developed for NYP's School of Information Technology (SIT Club) to streamline club membership onboarding, student project initiatives (Dev Swift, NYP Cloud), and community event registrations.

GitLab Repository: opediumgg/sitclub

Academic Track: NYP SIT Club Coursework

Standard: IBM SkillsBuild Certified Guidelines

Live Portal Demo GitLab

TECHNOLOGY STACK:

HTML5 CSS3 (Grid / Flexbox) JavaScript (ES6+) Bootstrap 5 UX Wireframing & Prototyping IBM SkillsBuild

End-to-End System Pipeline & User Journey

Student Visitor

Sub-Initiatives Hub (Dev Swift / Cloud)

Interactive Event Filtering

Admin ID Verification & Form Submit

Individual Engineering Contributions

1. Responsive Multi-Page Architecture & Sub-Initiatives

Engineered the complete information architecture and responsive framework to showcase student-led engineering sub-initiatives.

Designed dedicated hub sections for Dev Swift (iOS development workshops) and NYP Cloud (cloud engineering labs).
Maintained seamless cross-viewport responsiveness across mobile (320px), tablet (768px), and wide desktop displays (1440px).
Built modular layout templates allowing student committee members to publish announcements without layout breakage.

2. Dynamic Event Filtering & Form Validations

Developed interactive frontend components to streamline student engagement and event participation.

Engineered dynamic category filtering for club workshops, tech talks, and hackathon schedules using vanilla JavaScript.
Implemented client-side form validation checking NYP student Admin IDs and contact inputs prior to submission.
Created accessible interactive modal windows and dropdown menus with clear visual states.

function validateAdminId(adminId) {
    const pattern = /^[0-9]{6}[A-Za-z]$/; // Standard 7-character NYP Admin ID format
    return pattern.test(adminId.trim());
}

3. Alignment with IBM SkillsBuild Principles

Incorporated professional user experience principles adhering to industry-standard web accessibility guidelines.

Applied high-contrast typography palettes, keyboard-navigable interactive widgets, and semantic HTML5 markup.
Conducted user testing feedback sessions to refine navigation pathways and minimize friction for new student club recruits.