STK Opatija-08 Club Management Platform

The Challenge

STK Opatija-08, a table tennis sports club in Opatija, Croatia, needed to modernize their operations and online presence. Their existing workflow relied on manual processes and fragmented tools that couldn't keep pace with the club's growing community.

• Manual event management: Managing recurring training sessions, tournaments, and events across multiple coaches and skill levels was time-consuming and error-prone
• Scattered player data: Player information, achievements, and statistics were scattered across spreadsheets with no central source of truth
• No web presence: The club lacked a professional website to attract new members and showcase their community
• Administrative overhead: Tasks required significant manual effort with no role-based access control

Our Approach

We designed and built a comprehensive full-stack platform that serves as both the club's public website and their internal management system.

• Unified Architecture: Single Next.js 15 application with App Router serving both public pages and admin dashboard, enabling code reuse and consistent UX
• Robust Event System: Implemented RFC 5545 RRULE specification for complex recurring events with per-occurrence customization and cancellation tracking
• Security-First Design: Row-Level Security (RLS) policies in PostgreSQL ensure data isolation, combined with JWT-based authentication and role-based access control
• Optimized Media Pipeline: Cloudinary integration with automatic image optimization, blurhash placeholders, and responsive variants for fast loading
• Internationalization Ready: Built with next-intl from the start to support Croatian and future language expansion

Key Features

• Recurring Event Management: Full RRULE support for complex schedules (bi-weekly coaching, monthly tournaments) with individual occurrence overrides and cancellation tracking
• Player Profiles & Achievements: Comprehensive player directory with photos, statistics, achievements, and seasonal performance tracking
• Rich Content Editing: Tiptap-powered WYSIWYG editor with AI text enhancement via Google Gemini integration for polishing content
• Media Gallery System: Organized galleries with drag-and-drop reordering, lightbox views, and automatic image optimization
• Role-Based Admin Dashboard: Customizable dashboard with widgets, supporting SUPER_ADMIN, ADMIN, EDITOR, and VIEWER roles
• Event Sign-ups & Notifications: Members can register for events with email confirmations via Resend
• Printable Calendars: Export weekly and monthly calendar views optimized for print

Results

The platform transformed how STK Opatija-08 operates and engages with their community:

• 35+ database models powering comprehensive club management
• 150+ custom React components for consistent, accessible UI
• 37+ admin pages for complete operational control
• 4 user roles with fine-grained permission management
• Real-time event management with recurring schedule support

Technical Architecture

A modern full-stack architecture built for performance, security, and maintainability:

| Layer | Technologies | |-------|-------------| | Frontend | Next.js 15 App Router, TypeScript, Tailwind CSS, Radix UI, Framer Motion, TanStack Table, Tiptap Editor, Embla Carousel, dnd-kit | | Backend | Next.js API Routes, Prisma ORM, PostgreSQL with Row-Level Security, NextAuth.js v5, Zod validation | | Infrastructure | Supabase (PostgreSQL), Cloudinary (Media CDN), Resend (Transactional Email), Google Gemini (AI Text Enhancement) |

Technical Highlights

This project showcases several advanced implementations:

Row-Level Security: Database-level access control using PostgreSQL RLS policies with session context injection, ensuring data isolation without application-level filtering.

Complex Event Scheduling: Full RFC 5545 RRULE implementation with series expansion, occurrence overrides, and cancellation handling for flexible recurring events.

Media Optimization Pipeline: Automatic blurhash generation, dominant color extraction, and responsive image variants ensure fast loading across all devices.

Type-Safe Full Stack: End-to-end TypeScript with Zod schemas shared between client and server validation eliminates runtime type errors.

CMS & Admin Experience

The platform includes a comprehensive content management system built specifically for sports club operations:

Dashboard Experience

• Customizable Widget Layout: Drag-and-drop dashboard with resizable widgets showing upcoming events, recent activity, member statistics, and quick actions
• Role-Specific Views: Dashboard adapts based on user role—editors see content queues while admins see system health and user management
• Activity Feed: Real-time activity stream showing recent changes across the platform with quick navigation to affected items

Content Management

• Rich Text Editor: Tiptap-powered editor with formatting toolbar, image embedding, tables, and AI text enhancement via Google Gemini
• Draft/Publish Workflow: Content moves through draft → review → published states with scheduled publishing support
• Version History: Full revision history with diff views and one-click rollback to previous versions
• SEO Tools: Built-in meta description editor, slug customization, and Open Graph image selection

Media Library

• Centralized Asset Management: All images organized in a searchable library with folders, tags, and automatic metadata extraction
• Bulk Upload: Drag-and-drop multiple files with progress tracking and automatic optimization
• Image Editor: In-browser cropping, rotation, and focal point selection for responsive image variants
• Usage Tracking: See where each asset is used across the site with automatic orphan detection

Event Administration

• Visual Calendar Interface: Month/week/day views with drag-and-drop event creation and rescheduling
• Recurring Event Templates: Create templates for regular training sessions with exception handling for holidays
• Registration Management: View and export attendee lists, send bulk communications, and track capacity
• Conflict Detection: Automatic warnings when scheduling overlapping events for the same venue or coach

Player Management

• Profile Builder: Comprehensive player profiles with photos, biography, playing history, and achievement badges
• Statistics Tracking: Record match results, rankings, and performance metrics with automatic leaderboard generation
• Document Storage: Attach medical certificates, membership agreements, and other documents to player profiles
• Bulk Operations: Import/export player data, send group communications, and manage membership status in batches

Additional Admin Features

• User Management: Invite new users, assign roles, and manage permissions with audit logging
• Site Settings: Configure club information, contact details, social links, and branding from a central location
• Email Templates: Customize automated email templates for event confirmations, welcome messages, and notifications
• Analytics Dashboard: View page views, popular content, and user engagement metrics powered by integrated analytics