Project Overview

The UBCMA Membership Portal is a centralized platform designed to manage the lifecycle of a student’s membership in the club. From event registration and ticketing, to alumni networking and job postings, the portal enables both members and club executives to capitalize on MA's resources.

Our goal was centralized around what it means to be a Member. Previously, membership acted as a transaction for our club to gain incremental revenue in exchange for allowing access to our events, but there was real opportunity to foster engagement and community through a centralized membership platform. Building this app not only opened up numerous benefits for our members such as exclusive access to events, job postings, and alumni connections, but also gave our internal teams access to analytics that were previously unavailable with third party vendors such as Showpass or Bounce.

Business Impact

Last year, the first MVP of the membership portal drove ~$5700 in revenues and facilitated >400 event signups. Now, with a more scalable and robust tech stack with fine tuned user experiences, we aim to exceed these numbers by over 50%.

The Product

Product covers both UI/UX design and system design. When it came to UI/UX design, I designed the intiial app prototypes on Figma based off a simple design system with button styles, colors, and layouts for auth flows and primary route pages. Given the brief time frame that we had to launch, planning our database structure and endpoints was a greater priority.

(database design diagrams)

The initial scope of the app stretched to events, registrations, memberships, and transactions. Users signed up to purchase membership, which gave them the ability to register and pay for exclusive events. From there, I organized these tables into an entity-relationship diagram to document relational logic and sanity-check the scope with my team.

Tech stack

Under the previous team, the first prototype leveraged Next.js' fullstack capabilities with Nextjs API and Firebase. Approaching this year, I realized that although it may increase delivery speed in the short term, too much of the business logic was coupled with Frontend UI and the codebase quickly became difficult to manage. We decided to opt for a separated frontend app and backend service instead, which greatly improved dev experience. Additionally, we were able to perform complex queries much faster with PostgreSQL + Drizzle ORM in comparison to Firebases' Node.js SDK.

A high level system design diagram for the UBCMA membership platform

Frontend Methodology

Next.js comes packaged with server side rendering capabilities, middleware, Next API routes, and streamlined CI/CD with the Vercel ecosystem. I wanted to focus on delivery speed with a tech stack that my team was familiar with, and React + ShadCN + Tailwind fit those requirements perfectly despite some performance overhead compared to other frameworks such as Vite.

Backend Infrastructure

A TypeScript (TS) based backend was chosen for shared type notation with the Frontend stack. Node.js and Express are the standard with TS, and any performances differences between Golang or Python's FastAPI were not significant enough to outweigh the TS ecosystem benefits. Our backend uses Drizzle ORM for typesafe communication with our dockerized PostgreSQL instance, and a Redis cache was spun up for user session storage and payment intent persistence during checkout. Better-auth's out-of-the-box authentication endpoints and configurations integrated perfectly with our backend stack without reliance on third party cloud providers like Supabase or Clerk.

External Services

Stripe is our provider for all secure payment methods, which allowed us to offer apple pay, autofill for payment and billing, customer tracking, refunding, and discount codes. AWS Simple Email Service (SES) was configured for event ticket issuance and account verification with minimal downtime and latency. For Object Storage, we opted for UploadThing as an alternative to AWS S3, as they offered a generous 2GB free tier with a simple library compatible with express.

Project Management

I leveraged Linear to manage sprints, coordinate tasks across teams, and track implementation progress in real time. Linear gave us the visibility and structure to move from idea to implementation with speed and confidence. It became a powerful way to drive cross-functional collaboration, scope clarity, and shippable outcomes.

Linear project workspace & Slack automations

Task Management & Documentation

Our issue board tracked work across all of our devs in a traditional kanban board style. Tags were used for frontend/backend, features, and infrastructure to filter issues by area of responsibility. Some other organization strategies I employed:

• Status-based workflows to visualize progress (e.g. blocked, in-progress, needs support)
• Used custom labels for ownership and tech stack
• Implemented PR-linked automation to reduce manual tracking

This allowed us to move fast while keeping overhead low. In addition, I used Linear’s timeline view to define clear development phases—starting with onboarding and authentication, and progressing through Stripe integration, email automation, and the alumni network. This gave our team a shared mental model of what needed to ship, when, and why, as well as which features are blocking.

Integration & Workflows

Our team integrated GitHub, Slack, and Notion with Linear to keep discussions, documentation, and code reviews in sync. I set up a three way sync between GitHub PR reviews, Linear issues, and Slack Threads that kept relevant stakeholders in the loop for new features and bug fixes. Updates to our documentation would be logged in a dedicated slack channel, with previews into changes. By consolidating these tools, the friction between the platforms was minimized and kept the whole team aligned asynchronously.

Approaching the year

At the time of publishing, this app has just been deployed to production at app.ubcma.ca. So far, we've acquired >100 users and generated ~$400 of revenue in our first week of launching. Feel free to try it out and let me know what you think!