Back to Projects

Penya Blaugrana San Diego

Official Supporters Group Platform

Penya Blaugrana San Diego

Project Overview

This project serves as the digital headquarters for Penya Blaugrana San Diego (Official Penya #2309). It solves the complex logistics of managing a non-profit supporters group by automating match schedules, handling seasonal membership renewals without data duplication, and providing a fully localized experience (EN/ES/CA) for a diverse community.

The Challenge

The organization needed a way to manage recurring seasonality without creating duplicate records for returning members. Additionally, match schedules change frequently, and manually updating the homepage was prone to error.

The Solution

I engineered a 'NextMatch' component that acts as the site's heartbeat. It interfaces with an external sports API to fetch the season schedule and uses client-side time logic to automatically rotate the hero banner to the immediately upcoming fixture.

For the membership system, I moved beyond simple CRUD. I implemented a 'Smart Upsert' strategy in PostgreSQL. Using a text array column (`seasons_active`), the system tracks a member's entire history in a single row, simply appending the new season upon renewal while preserving their original join date.

  • Full localization (i18n) for English, Spanish, and Catalan users.
  • Bento Grid gallery layout for a modern, responsive visual experience.
  • Secure Admin portal for toggling 'Watch Party' status on specific matches.

Key Features

Dynamic Match Scheduler

  • •Automated sync fetches fixtures via external API, reducing manual entry.
  • •Time-aware 'Smart Display' automatically promotes the next upcoming match.
  • •Location logic distinguishes between Home (Barcelona) and Away context.

Membership Engine

  • •Custom SQL upsert logic handles new vs. returning veterans to prevent duplicates.
  • •Uses PostgreSQL text[] arrays to track historical 'seasons_active' (e.g., ['24/25', '25/26']).
  • •Conflict resolution allows profile updates (phone/name) during renewals.

Admin Dashboard

  • •Role-based access control via Supabase Auth for board members.
  • •Global config controls to toggle membership enrollment windows.
  • •Match control system to designate specific fixtures as 'Official Watch Parties'.

Venue & Community

  • •Interactive Google Maps integration for the Otay Ranch headquarters.
  • •Responsive Bento Grid gallery showcasing the atmosphere and tech.
  • •Digital 'Chants' songbook replacing physical paper sheets.