OVERVIEW

We lacked a centralized space to manage membership and veto event signups through third party services.

The UBC Marketing Association (MA) is a student-run organization fostering growth and opportunity for students interested in marketing. Membership to the club costs $10 and grants access to our events, but one issue became prevalent: Siloed payment methods such as cash or electronic money transfer led to confusing systems, and there was no automated method to check whether an attendee was actually a member.

MA executives often had to manually cross reference event signup data with an excel sheet of members using INDEX MATCH. Additionally, membership payments were often unaccounted for due to the various disconnected payment methods.

My team built software to centralize and simplify these operations.

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.

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%.

PRODUCT

Designing a scalable system that feels good to use

When it came to UI/UX design, I designed the intial 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.

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.

We experimented with a modern tech stack used by fast-moving companies.

Under the previous team, the first prototype leveraged Next.js' fullstack capabilities with Next.js 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.

LEADERSHIP

We leveraged Linear to iterate fast and stay organized with high visibility across channels.

Our Linear was created 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

We stayed on top of task management and 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.

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.

HOW WE'RE DOING

Our app is deployed and being updated with new features actively.

Our app has been deployed to production at app.ubcma.ca. So far, we've acquired >300 users and generated ~$800 of revenue in our first month of launching. Feel free to try it out and let me know what you think!