2025
Back to projects
KSA Petegem Website
A modern, dynamic website for KSA Petegem youth movement, built with Astro and connected to Supabase for real-time content management.
Live website
|
# Astro
# React
# Supabase
# GSAP
KSA Petegem Website

The Vision

KSA Petegem needed a modern, user-friendly website that could keep pace with their active youth movement. The site needed to showcase their activities, help parents register their children, display team member profiles, and keep the community engaged with news and events—all while being easy to update without technical knowledge.

The Solution

I built a full-stack web application using Astro for blazing-fast performance, integrated with Supabase as the backend. The site connects directly to the same database as the admin dashboard, creating a seamless content management ecosystem where updates made in the CMS instantly appear on the public website.

Tech Stack

Astro with Server-Side Rendering

The site is built with Astro in SSR mode, providing:

  • Lightning-fast page loads with Astro’s zero-JS-by-default philosophy
  • Server-side rendering for optimal SEO and performance
  • Partial hydration with islands architecture for React components
  • View transitions for smooth page navigation without full reloads
  • Prefetching on hover for instant navigation

React Islands for Interactivity

Strategic use of React for dynamic content:

  • Real-time event listings fetched from Supabase
  • News feed with automatic date-based organization
  • Instagram widget integration via Behold
  • Group cards with hover interactions
  • Team member profiles with filtering

Supabase Integration

Connected to the same PostgreSQL database as the admin dashboard:

  • Real-time content pulled from database tables
  • Dynamic settings fetched from centralized configuration
  • Image hosting via Supabase Storage buckets
  • Automatic synchronization with admin changes

GSAP Animations

Smooth, professional animations using GSAP:

  • Full-screen menu overlay with clip-path animations
  • Staggered link appearances with timeline controls
  • Smooth transitions throughout the site
  • Escape key support for accessibility

Modern Styling

Custom CSS with thoughtful design:

  • Custom font (Bebas Kai) for distinctive branding
  • Responsive layouts that work on all devices
  • Fluid typography using clamp() for scalability
  • CSS custom properties for themeable colors

Key Features

Dynamic Content Management

  • News posts organized by month and working year (September-August)
  • Event calendar showing upcoming activities with date/time/location
  • Team member pages organized by age groups
  • Group profiles with leader information and monthly letters
  • Breadcrumb navigation for better UX

Registration System

  • Comprehensive registration guide with step-by-step screenshots
  • Ravot platform integration for member administration
  • PDF download for registration forms (pulled from settings)
  • Social tariff information for accessibility

Information Architecture

  • About pages covering history, structure, and activities
  • Privacy policy and documentation management
  • Contact information with main leadership profiles
  • Social media integration (Instagram, Facebook)

User Experience Features

  • Image zoom functionality using medium-zoom on registration guides
  • Lightbox support for gallery images
  • 404 error handling with custom page
  • Loading states for async content
  • Accessibility with proper ARIA labels and keyboard navigation

Technical Highlights

Performance Optimizations

  • Hybrid rendering: Static pages where possible, dynamic where needed
  • Image optimization: Automatic WebP conversion and responsive sizing
  • Font optimization: Custom font with swap strategy
  • Prefetching: Hover-based prefetching for instant navigation
  • CDN deployment: Hosted on Netlify with edge optimization

Data Architecture

  • Shared database with admin dashboard for instant updates
  • Settings API with TTL caching for frequently accessed data
  • Dynamic routing for posts, events, and group pages
  • Filtered queries for published vs. draft content
  • Date-based logic for academic year organization

Developer Experience

  • TypeScript for type safety across components
  • Component library with reusable UI elements (Buttons, Cards, Breadcrumbs)
  • Modular CSS with scoped component styles
  • Client directives for optimal React hydration
  • Development toolbar disabled for cleaner preview

Architecture Decisions

Why Astro + React?

  • Astro for static pages and SEO-optimized content
  • React islands only where interactivity is needed
  • Best of both worlds: Static performance with dynamic capabilities

Why Same Database?

  • Single source of truth prevents content drift
  • Instant updates without rebuild/redeploy cycle
  • Simplified maintenance with one database to manage
  • Cost efficiency with shared infrastructure

Why GSAP?

  • Professional animations that enhance UX
  • Timeline control for complex sequences
  • Cross-browser compatibility without CSS workarounds
  • Performance optimized for smooth 60fps animations

Impact

The website successfully serves multiple audiences:

  • Parents: Easy registration process and activity information
  • Members: Stay updated on events and news
  • Community: Transparent information about the organization
  • Leaders: Automatic content updates without technical skills

The connection to the admin dashboard means the website is always current, with no deployment lag between content creation and publication. This has significantly reduced the workload for maintaining the online presence while improving content freshness.

Live at ksapetegem.be

Visit ksapetegem.be to see the site in action, showcasing how modern web technologies can serve community organizations with style and efficiency.