← Back to portfolio
PWA Multi-tenant Solo-built

Noticeboard

School Info Display System

A multi-tenant Progressive Web App I designed, built and shipped entirely solo. Schools manage their LCD display screens through an admin dashboard; a Vue.js 3 single-page app fetches live data from a REST API and renders 20+ modules in real-time.

CodeIgniter 4 Vue.js 3 PHP 8 MySQL Bootstrap 5 REST API Service Worker PWA PhpSpreadsheet Open-Meteo API

LCD Screen — Live Simulation

This Vue.js 3 simulation mirrors what schools see on their LCD screens. The production app fetches all data from /api/{school_code} and updates modules independently via a flag-based system.

{{ school.name }} {{ clock }}
Weather Forecast
{{ weather.icon }}
{{ weather.temp }}°C
{{ weather.desc }}
Teacher on Duty
{{ t.name }}
{{ t.location }}
Birthdays Today
{{ b.name }}
{{ b.class }}
Quote of the Day
"{{ quote.text }}"
— {{ quote.author }}
{{ ticker }}

20+ independently configurable modules

Each school enables only the modules it needs, with custom titles and display settings stored as JSON per school.

01
Weather Forecast

10-day forecast via Open-Meteo API. Auto-refresh every 6 hours with Turkish weather descriptions.

02
Teacher Duty Roster

Daily teacher duty assignments per location. Excel import for bulk entry.

03
Student Duty Roster

Student duty assignments with name, class, and station. Excel import supported.

04
Birthdays Today

Celebrates student birthdays with canvas-based confetti animation. Paginated for many birthdays on one day.

05
School News

News carousel with images and dates. RSS feed import available for bulk content.

06
Announcements Ticker

Scrolling announcement ticker pinned to the bottom. Priority-based ordering.

07
Photo Gallery

Auto-rotating image gallery with configurable transition intervals and captions.

08
Lesson Timetable

Full class schedule with live countdown to next lesson. Active lesson highlighted in real-time.

09
Today in History

Historical events for the current date in a carousel. Bulk import via external API.

10
Daily Quote

One motivational quote per day. Bulk import via JSON for year-round pre-loading.

11
Student of the Month

Monthly recognition with photo upload and animated celebration using canvas confetti.

12
School Identity

School name, logo and live clock persistently visible. Per-school branding via template config.

Architecture highlights

Multi-Tenant Isolation

All data scoped to school_code. One deployment serves unlimited schools. Per-school JSON templates control module visibility and theming.

PWA + Service Worker

Static assets cached on install. API uses network-first with stale fallback. Display screens continue running during network loss.

Module Flag System

Each module tracks a flag_updated_at timestamp. Vue frontend polls /api/.../flags and re-fetches only changed modules — minimal traffic on slow networks.

REST API Design

Clean endpoints: /api/{school_code} for all data, /api/{school_code}/{module} for individual modules. Stateless, JSON-only.

Data Import Pipeline

PhpSpreadsheet for Excel (duty rosters, lesson times). RSS for news. External APIs for weather and historical data. JSON bulk import for quotes.

Admin Dashboard

Full CRUD for 20+ modules. DataTables with server-side processing, modal forms, role-based access, email/SMS verification.

Interested in Noticeboard?

Get in touch to discuss a demo, a deployment, or what this kind of engineering could look like in your organisation.

Get in Touch Back to Portfolio