Live Client Case Study

How I turned OCPC’s scattered workflows into one live community platform.

Membership lived across group chats, spreadsheets, and personal notes. Merchandise orders and coaching requests arrived through Facebook Messenger. I designed and built one actively used platform that brings those workflows together for officers, members, players, spectators, and the broader community.

RoleVP, Head of Tech & Social Media; Sole Designer & Developer
EngagementInternally Led & Compensated
StatusLive for Several Months
StackFirebase, Vanilla JS, Cloudinary
Live Siteonecavitepickleball.club ↗
One Cavite Pickleball Club homepage
The Problem

Growth had outpaced the tools.

Before the platform, OCPC had no central operating system. Group chats, messy Excel sheets, and notepad records carried the administrative load, while Facebook Messenger handled merchandise orders and coaching requests. As the community grew, the cracks showed:

  • Member information was scattered across chats, spreadsheets, and personal notes
  • Attendance was tracked manually, without one reliable history
  • Merchandise orders and coaching inquiries could get buried in Messenger threads
  • Players and spectators had no single place to check schedules, courts, or community information
The Approach

Systems thinking, applied to code.

I looked at this the same way I'd look at a business's backend: map out every real workflow first, then figure out what actually needed automating versus what needed to be built from scratch.

No off-the-shelf setup matched the way the club actually worked. I designed and built a real application: player accounts, a live shop, attendance-driven leaderboards, coaching requests, an admin dashboard, open-play schedules, featured courts, and community experiences such as the pickleball personality quiz.

What Was Built

A full-featured platform, page by page.

Every feature below is live in production, not a prototype. Screenshots are from the real site, with member names and order amounts blurred out.

01

Public Marketing Site

A live homepage with the week's open-play schedule, a countdown to the next session, a real-time player spotlight pulled from attendance data, and an auto-rotating events section that archives past events by date with no manual editing needed. The Featured Courts page doubles as a pitch to court owners: host a session, get real player turnout, get featured here.

Meet the Club (dynamic roster) Events (auto-archiving) Gallery Rules & Etiquette Birthdays Featured Courts
OCPC Featured Courts page with court owner partnership pitch
02

Full Commerce Flow

Replaced a single-item Google Form order process with a real cart-based shop: browse products, add multiple items, review the cart, then check out once with cascading Philippine address fields, GCash/bank QR payment, discount codes, and proof-of-payment upload. Every order gets a sequential order number and an automatic email confirmation.

Product Catalog Cart (localStorage) Checkout Discount Codes Email Confirmations
OCPC merch shop catalog
03

Attendance & Leaderboard

Officers log attendance by name. The system ranks the top players over a rolling 4-week window and shows each player their own stats, rank, and how many more sessions they need to move up. Real names get messy in practice: people go by nicknames, shortened names, or names that don't match their registered account. I built a matching system that merges the obvious cases automatically and lets admins link the rest by hand, without ever touching the raw attendance log.

Rolling Leaderboard Nickname/Alias Matching Player Profile Stats Auto Name Matching
OCPC leaderboard podium
04

Player Accounts & Community

Free self-service signup with an optional profile photo, a personal dashboard showing lifetime stats, an 8-week attendance chart, order history, and a preferred nickname players can set themselves. Small touches like a birthday shoutout widget keep the site feeling like a club, not just a tool.

Self-Service Signup Profile Dashboard Order History Birthday Shoutouts
OCPC birthday shoutout widget, names and photos blurred
05

Coaching Bookings

Another Google Form replaced with a real request flow: pick a timeslot next to an existing open-play session, see the total cost calculated live (coaching rate plus court fee), and submit with payment reference and proof of payment attached. Requests land straight in the admin backend instead of a spreadsheet nobody checks.

Slot Selection Live Price Calculation Payment Proof Upload
OCPC coaching booking page
06

Order Tracking

Buyers can look up their order by number and see its payment and fulfillment status without logging in. It's a small page, but it means players stop messaging the club page just to ask "did my order go through?"

Public Order Lookup Fulfillment Status
OCPC public order tracking page
07

Live Court Queue Tool

A run-of-session tool for whoever's managing check-in: add players as they arrive, auto-fill or drag them onto a court by team, start the match timer, and log scores when a game wraps up. It runs entirely in the browser on one device, since that's how open play actually gets managed on the ground.

Drag & Drop Court Assignment Match Timer Waiting Queue
OCPC court queue tool
08

Admin Backend

A full dashboard for club officers to run everything without touching code: order management with payment-proof thumbnails and status controls, coaching request handling, discount code creation, attendance recording, member approval and role management, and a settings panel to toggle a site-wide announcement banner. Every order placed in one checkout is grouped together, so officers can see at a glance which products belong to the same purchase.

Orders Dashboard Member Management Attendance Recording Discount Codes Site Settings Email Notifications
OCPC admin dashboard overview, revenue and customer names blurred
Every Page, At a Glance

12+ pages, one consistent system.

Home
Schedule, countdown, spotlight, events
Meet the Club
Dynamic roster + leadership
Events
Auto-archiving past/upcoming
Shop
Product catalog
Cart & Checkout
Multi-item order flow
Track Order
Public status lookup
Leaderboard
Attendance rankings
Profile
Player dashboard
Coaching
Booking + payment
Featured Courts
Partnership pitch page
Join / Sign Up
Account creation
Admin Dashboard
6-tab officer backend
Court Queue
Live check-in and match tool
Under the Hood

A deliberately lean stack.

No framework overhead, no dependencies I didn't need. I picked these tools for speed to ship and low ongoing cost, the same way I'd pick tools for any operations build.

HTML / CSS / Vanilla JS Firebase Authentication Firestore (NoSQL DB) Firestore Security Rules Cloudinary (image hosting) EmailJS (transactional email) Service Worker Caching Vercel Hosting
The Result

From scattered tools to one live system.

121
Registered Members
205
Attendance Check-Ins
13
Merchandise Orders
5
Coaching Bookings
The result is more than a cleaner backend. Members and players get a clearer experience, while spectators can check open-play schedules, discover featured courts, and take the personality quiz.
Operational impact after several months live
Want Something Like This?

Let's talk about what your operation actually needs.

Whether that's a properly configured CRM or a fully custom platform like this one, I'll tell you honestly which one it is.

Start the Conversation →