Official Supporters Group Platform
Penya Blaugrana San Diego
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.
Technology Stack
Frontend & Framework
Backend & Data
Internationalization
Integrations
Gallery
