2025
Back to projects
KSA Petegem Dashboard
A full-stack CMS built with React Router and Supabase, enabling KSA Petegem team members to manage website content independently through an intuitive, installable PWA.
Source Code
|
# React Router
# Supabase
# TypeScript
# PWA
KSA Petegem Dashboard

The Problem

Managing the KSA Petegem website became a bottleneck. Every time the team wanted to update an event, publish a news post, or modify member profiles, they had to contact me to make code changes. This dependency wasn’t sustainable for a dynamic organization that needed frequent content updates.

The Solution

I built a comprehensive Content Management System tailored specifically for KSA Petegem’s needs. The dashboard at admin.ksapetegem.be provides an intuitive interface where authorized team members can manage all aspects of ksapetegem.be without touching any code.

Tech Stack

React Router 7 with TypeScript

Built with the latest React Router v7, the application leverages:

  • Type-safe routing with route-based code splitting
  • Server-Side Rendering (SSR) for improved performance and SEO
  • Client loaders for efficient data fetching
  • Modern React patterns with hooks and context

Supabase Backend

Supabase provides a complete backend-as-a-service solution:

  • PostgreSQL Database: Storing posts, events, member profiles, and settings
  • Authentication: Row-level security with email/password authentication
  • Storage Buckets: Managing images (cover photos, profile pictures) and PDF documents
  • Real-time capabilities: Built-in real-time subscriptions (ready for future features)

Progressive Web App (PWA)

The dashboard is a fully-featured PWA with:

  • Installable: Can be installed on any device as a standalone app
  • Offline-ready: Manifest configuration for native-like experience
  • Mobile-optimized: Responsive design using Tailwind CSS and shadcn/ui components
  • Fast & reliable: Optimized loading and caching strategies

Deployment

  • Hosted on Netlify with automatic deployments from the main branch
  • Vite build system for lightning-fast development and optimized production builds

Key Features

Content Management

  • Posts (Berichten): Create, edit, publish/unpublish news articles with rich text editing, cover images, and slug management
  • Events (Activiteiten): Full calendar management with date/time, location, descriptions, and target group filtering
  • Member Profiles (Leiding): Manage active and inactive team members with photos, bios, roles, and group assignments

Advanced Capabilities

  • Permission System: Three-tier permission levels (Social Media Team, Webmaster, Admin) with granular access control
  • Document Management: Upload and manage PDF documents (registration forms, privacy statements)
  • Settings Management: Centralized configuration for website features and content visibility
  • Group Management: Define and organize different youth groups with custom colors and monthly letters

Data Export

  • Excel Export: Generate spreadsheet reports of member data
  • PDF Generation: Create formatted PDF lists using jsPDF with custom tables
  • Bulk Operations: Mass update member information efficiently

Developer Experience

  • Full TypeScript: Type safety across the entire application
  • Modern UI: Built with shadcn/ui components and Radix UI primitives
  • Form Validation: Client-side validation with unsaved changes protection
  • Toast Notifications: User feedback with Sonner for all actions
  • Error Boundaries: Graceful error handling throughout the app

Technical Highlights

The application showcases several modern web development patterns:

  • Server-side rendering with React Router’s SSR capabilities
  • Optimistic UI updates with data revalidation
  • File upload handling with Supabase Storage
  • Permission-based routing protecting sensitive routes
  • Responsive tables using TanStack Table for complex data views
  • Theme system with dark/light mode support

Impact

This CMS completely transformed KSA Petegem’s workflow. Team members can now:

  • Update the website in real-time without waiting for developer availability
  • Manage events and announcements from their phones while on-location
  • Keep member information current throughout the year
  • Publish content immediately during time-sensitive situations

The project demonstrates how modern web technologies can solve real organizational challenges while maintaining a delightful user experience.

Built in my spare time over several months, this project represents a complete full-stack application from authentication to deployment, solving actual problems for my community.