Selected Work
2023 · Full Stack

UHnify: Campus Engagement

A full stack club discovery platform for University of Hawaiʻi at Mānoa students: search and filter every registered organization, join the ones that fit, and follow their events from one reactive calendar.

MeteorReactMongoDBSimpleSchemaFullCalendarRBAC
UHnify: Campus Engagement

Overview

UHnify is a full stack club discovery platform for University of Hawaiʻi at Mānoa students. It lets them search and filter every registered organization, join the ones that fit, and follow their events from one reactive calendar. It was a team project where I worked on the interface and the real time data layer.

Stack

  • Runtime and data: Meteor 2.13 (isomorphic JavaScript) on MongoDB, with reactive publications and subscriptions.
  • Frontend: React 18, React Router 6, and React-Bootstrap on Bootstrap 5.
  • Forms and validation: Uniforms 3 with SimpleSchema, wired to collections through collection2.
  • Calendar: FullCalendar 6 in a day grid month view.
  • Auth: Meteor accounts-password with alanning:roles for role based access.

Architecture

  • Server authoritative writes: every mutation runs through a Meteor method with check-validated arguments, and the insecure package is removed so no client writes to the database directly. Methods are isomorphic, giving latency compensated optimistic UI.
  • Schema enforced collections: all six collections attach a SimpleSchema through collection2, validating documents on insert and update across client and server from one schema definition.
  • Normalized relational model: memberships and event ownership are modeled with dedicated join collections (ProfileClubs, EventClubs) rather than embedded arrays, keeping the many to many relationships queryable.
  • Scoped reactive data: each page subscribes only to the publications it needs, and consumes them through react-meteor-data's useTracker.
  • Role based access control: an admin role gates the admin dashboard and destructive actions behind protected routes and a dedicated not-authorized screen.

Core features

  • Directory: keyword search, multi category filtering, and pagination across the full club catalog, each entry with a details modal and per user join and leave state.
  • Personal dashboard: "My Clubs" tracks memberships, and "My Events" aggregates events from joined clubs into a FullCalendar month view.
  • Creation and admin flows: members create clubs and events through schema generated forms, and admins have full CRUD over clubs, events, and member profiles.

Frontend and performance

  • Token driven design system: a single stylesheet defines the color, type scale, spacing, and elevation tokens behind a consistent component language, on a three face typographic system.
  • Accessible by default: visible keyboard focus, prefers-reduced-motion support, and responsive layouts down to mobile.
  • Optimized asset pipeline: resized and format converted the image set, migrating every reference and cutting the served image payload by roughly 85%.