A comprehensive 15+ page Progressive Web App for a primary school featuring offline browsing via Service Workers, an interactive virtual campus tour, real-time sustainability dashboard, alumni network, WCAG 2.1 AA+ accessibility compliance, and installable mobile experience — bringing a rural school into the digital age.
Scope & Impact
The Problem
St. Alloyce School serves a community where internet connectivity is inconsistent, devices vary widely in capability, and parents may have limited digital literacy. A traditional website would fail: heavy pages won't load on 2G, inaccessible designs exclude users with disabilities, and no offline mode means the site is useless during frequent outages.
The school needed more than a website — they needed a digital platform that works for their community's reality while showcasing the school's programs, sustainability initiatives, and alumni success stories to attract enrollment and funding.
The Solution
A PWA architecture ensures the site works offline, loads fast on slow connections (Service Worker pre-caching), and can be installed directly to home screens without app store friction. Every page meets WCAG 2.1 AA+ standards with proper semantic HTML, keyboard navigation, screen reader support, and high-contrast mode.
The virtual tour lets prospective parents explore the campus from anywhere. The sustainability dashboard tracks the school's environmental initiatives (solar panels, rainwater harvesting, tree planting) with real-time data visualization. The alumni network connects graduates and facilitates mentorship and fundraising.
Features
Tech Stack
Proper heading hierarchy, ARIA roles, landmark regions, and structured data (Schema.org) for SEO. Every page validates W3C standards.
CSS custom properties for theme switching (standard/high-contrast). Fluid typography with clamp(). Reduced-motion media queries for users who prefer minimal animation.
Service Worker with cache-first strategy for static assets and network-first for API calls. Background sync queues form submissions when offline.
Web App Manifest with app icons, splash screens, and display: standalone. Passes Lighthouse PWA audit with 100/100 score.
Challenges
Designed offline-first: every critical page pre-cached on first visit. Background sync ensures contact form submissions queue and retry automatically when connectivity returns.
Optimized for devices with limited RAM and processing power. No heavy JavaScript frameworks — vanilla JS only. Images served in WebP with JPEG fallbacks and lazy loading.
15+ pages each meeting WCAG 2.1 AA+. Built a reusable component system with pre-tested accessible patterns: accordions, tabs, modals, and carousels that work with keyboard and screen readers.
School staff needed to update news and events without touching code. Implemented a JSON-based content system where non-technical users edit simple data files to update the site.