Penya Blaugrana San Diego
Official Supporters Group Platform
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.
Tech Stack & Architecture
| Category | Technologies |
|---|---|
| Frontend & Framework | Next.js 15 (App Router), React, TypeScript, Tailwind CSS |
| Backend & Data | Supabase (PostgreSQL), SQL Functions, External Sports API |
| Internationalization | next-intl, Middleware routing |
| Integrations | Stripe Payments, Framer Motion |
Key Features
- - 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.
- - 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.
- - 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'.
- - 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.
