Go Back

Kirkenduff Community Collective Webpage

Astro
React
Headless UI Components
CMS
Directus
Docker

2025 - 03 - 06

University industrial placement, focused on developing a comprehensive website for a local community non-profit organization. Anonymized for portfolio.

Screenshot of the main page for the app

A CMS backed website for a local town community organization

University industrial placement project

Live Site   Source Code  

Project Background

This project originated as a university industrial placement, focused on developing a comprehensive website for a local community non-profit organization. While client details and content have been anonymized for This portfolio piece, it represents a real-world engagement aimed at delivering a functional and easily manageable digital platform.

For this presentation the original Client has been anonymized and swapped to fictional town and data, as they ultimately decided against the upgrades.

Screenshot 1: Landing Page (Light Mode)

A core decision early in the project was to move beyond the traditional WordPress framework [1]. The primary goal was to deliver a lean, modern, and highly maintainable solution that could be easily managed by non-technical administrators [1]. This approach also provided an opportunity to explore contemporary web development practices and best ensure long-term ease of use.

In evaluating alternative Content Management Systems, several options were explored. Many presented general challenges such as significant setup complexity, heavy dependencies on specific frameworks, or administrative interfaces that could be overly technical for the intended end-users [1]. The objective was to find a balance between developer flexibility and genuinely user-friendly content management.

Ultimately, the solution employed a modern web stack featuring Astro for static site generation, utilizing React “dynamic islands” for interactive components, and Directus as the headless CMS. This combination provided an intuitive backend for staff to update content without technical expertise, while delivering a fast, accessible, and cost-effective frontend. Emphasis was placed on inclusive design, offering features like variable font sizing and high-contrast modes for enhanced usability. The entire solution was containerized using Docker for straightforward deployment and flexibility.

Screenshot 2: CMS Backend

This project successfully demonstrates the creation of a robust, adaptable, and user-centric web presence, highlighting full-cycle web development capabilities from conceptualization to deployment.

Screenshot 3: Mobile View of the page