Dol.

MIRAR Platform

Company
MIRAR, a separate company from PNMS under the same management
My role
Design, build and maintenance: the redesigned public website and the entire admin system
Status
In active development
Stack
Blazor Server · MariaDB/MySQL · EF Core · Cloudflare Workers

MIRAR (the Malaysian Institute for Risk and Resilience) runs training, advisory and credentialing. I redesigned its public website from the previous version, then built the whole admin system behind it: the tools staff use to run courses and sessions, issue certificates, deliver quizzes and surveys, publish articles and see how the site is used. I design, build and maintain all of it.

30admin routes
36data models
7email templates

The public website

I redesigned the public site from the previous version. Visitors see the pages below; the courses, sessions, articles and homepage ticker they read are all edited from the admin system.

Layout and navigation

One redesigned layout shared by every public page.

  • Mega-menu navigation for About Us, Advisory & Consulting, Public Courses and Professional Credentialing, with a separate mobile menu
  • Homepage ticker whose items are managed from the admin
  • Home, About, Our Team, Our Services, Policies, Career, Be a Partner, Be a Member and Contact pages
  • Responsive layouts for phones and tablets

Courses and calendar

Where visitors find a course and register interest.

  • Course catalogue by category; each category's hero text, navigation label and meta description come from the admin
  • Course pages with learning outcomes, a learning pathway, upcoming sessions and a register-interest form
  • HRD Corp claimable badge on courses and sessions
  • Training calendar with a format filter and price per person; each session can hide its dates or its seat count

Articles

Publishing, reading and contributing.

  • Article list with category and tag views, and article pages with comments
  • Public article submission with cover image upload, held for review before it goes live
  • RSS feed of the latest 30 articles

Forms and enquiries

Everything a visitor can send.

  • Contact and course-interest forms save to the database and email the team
  • Every submission appears in the admin Leads page

ISelia and Daily Brief

Product and intelligence pages.

  • ISelia Risk System overview and features pages
  • Daily Brief: live news columns and a risk snapshot from the shared feeds API, cached for five minutes, and it falls back to empty columns instead of an error if the API is down

Search and sharing

How the site shows up outside itself.

  • Open Graph images for 11 pages, plus canonical and Open Graph tags on course pages
  • Generated sitemap.xml covering pages, categories, courses and articles, plus robots.txt

The admin system

I built all of it: 30 routes, each behind its own sign-in guard. The sidebar shows live counts of what needs attention, and most list pages export to Excel, CSV or PDF.

Dashboard

One screen for what needs doing today.

  • Eight stat cards: pending registrations, enquiries, visits, upcoming sessions, courses, members, certificates issued, and live quiz and survey sessions
  • A Needs Attention list: registrations to process, articles pending review, comments to moderate, hidden sessions starting within 14 days, sessions 80% full, and members who haven't activated
  • Website traffic chart with top pages, upcoming events with seat fill, and recent registrations
  • A searchable recent-activity feed and an admin-actions feed

Courses, categories and calendar

The catalogue behind the public site.

  • Course editor with details, learning outcomes, learning pathway steps and publish settings
  • Category manager: slug, navigation label, hero copy, meta description, order and visibility
  • Training calendar: location, format, seats total and taken, price, HRD claimable, show or hide dates and seats
  • Course resources: external video links with ordering, alongside the uploaded materials linked to each course

Certificates

Issue, email and verify.

  • Issue one or a whole batch: pick the course and session, paste the names, review names, codes and emails, then issue
  • Issue as MIRAR or PNMS with the right logo, seal and signature; choose the frame and certificate type
  • Structured certificate codes built from company and course acronyms
  • Certificates grouped by session; edit a whole batch, revoke or restore any one
  • Email one recipient or a whole group, resend, or send automatically on issue; recipients without an account become members and get an activation link
  • Preview and print. The PDF is rendered in the browser from the same markup as the preview, so what is emailed matches what is on screen
  • Download a batch as one ZIP with a PDF per person; a server-side renderer is kept as a fallback

Quizzes

Build once, run many sessions.

  • Five question types: single choice, multiple choice, dropdown, short answer and paragraph
  • Points, required flags, images, an “Other” option, drag-to-reorder and duplicate
  • Timer, question shuffling, pass mark and show-results-immediately settings
  • Import from question banks; imported questions stay live-linked until you unlink them
  • Sessions per quiz, each with its own QR code and join link, open and close times, attempts per person and a certificate toggle
  • Draft and published status; duplicate quizzes and sessions

Quiz analytics

What happened in each session.

  • Summary, Individual and Question tabs, for one session or across all of them
  • Pass counts, attempt detail view and delete attempt
  • Export to Excel and PDF

Surveys

Scored assessments and plain surveys.

  • Sections with five item types: 1–5 Likert, single select, scored single select, multi-select and open text
  • Reverse-scored items and per-section averages
  • Custom score tiers per survey, each with its own name and recommendation text
  • Survey banks; importing copies items, so a live survey never changes underneath respondents
  • Sessions with a custom URL slug, anonymous or identified (name, email, phone, organisation), optional email notification per submission, optional results for the respondent, and a public listing
  • A QR code for every session

Survey analytics

Making the responses usable.

  • Summaries per session and per survey, with a breakdown for every question
  • Free-text answers collected in one place
  • Respondent log and detail view, delete a response, export

Articles and comments

A small publishing workflow.

  • Rich-text editor written in vanilla JavaScript with no library: formatting, links, inline images and an HTML source view
  • Cover and body image upload; slugs generated and checked for uniqueness
  • Categories, tags, published date, and a draft, pending review and published workflow (public submissions arrive as pending)
  • Comment moderation: approve or delete, an editable flagged-word list, and automatic holds for same-IP floods and rapid reposts

Members

Everyone who has a login.

  • Add, edit and remove members; see who has activated
  • Send activation emails with a link that is valid for 48 hours
  • Members are also created automatically when a certificate is issued to a new email
  • Export to Excel and PDF

Leads

Registrations and messages in one place.

  • Course registrations and contact messages, searchable, with a detail view
  • Bulk select, and delete with confirmation
  • Export to CSV, Excel and PDF

Activity and logs

Who used the site and what staff changed.

  • Visits overview: unique sessions, IPs and users, top pages, top IPs and top countries
  • Raw visit log filterable by date, country, IP and session, with referrer and time on page
  • Audit log of data changes and sign-ins, and a separate admin-actions log
  • Bots filtered out and visitor country read from Cloudflare headers; export to Excel, CSV and PDF

Training media

Large files with a stable public link.

  • Upload video, documents, slides and images up to 1 GB, with a progress bar
  • Link a file to a course so participants see it in their materials
  • Copy the public URL or an embed code; documents open in an in-site viewer

Homepage ticker

The scrolling line on the home page.

  • Add, reorder, disable and remove items, then save or discard

QR codes

Branded codes for every session.

  • Dot style (dots, rounded, classy rounded, extra rounded), colours, logo and size
  • Download as PNG or SVG; the style is saved with the session

Flowchart tool

A diagram editor that runs in the browser.

  • A draw.io-style editor in about 4,800 lines of vanilla JavaScript
  • Start/end, process and decision shapes with connectors
  • Smart alignment guides, snapping, zoom and fit
  • Undo and redo, layer order, duplicate, and a style, text and arrange inspector
  • Autosaves in the browser; export as PNG

Patterns every page shares

So the admin feels like one product.

  • Slide-over edit panels, and delete dialogs that list exactly what will be removed
  • An unsaved-changes guard on every builder, for in-app navigation and for closing the tab
  • Sidebar with live badges, and a drawer on mobile
  • Search, filters and pagination on lists; snackbar feedback on every action

What participants and members see

The parts of the platform used by people who are not staff, all fed by the admin above.

Quiz player

Join, answer, get a result.

  • Join from a QR code or a short link; name and email first
  • Countdown timer with a warning in the last 30 seconds
  • Answers survive a dropped connection or a refresh
  • Instant score and tier: Achievements at 90%, Completion at 70%, otherwise Attendance. The matching certificate is issued automatically, and a retake can only upgrade it

Survey player

Long surveys that are easy to finish.

  • Questions grouped by section, with a progress bar and a section tracker
  • A “resume your response” prompt when someone comes back
  • A clear anonymity badge, and an optional results screen with their tier and recommendation
  • Layouts built for phones

Certificate verification

Anyone can check a certificate.

  • A public verify page that reports valid, revoked or not found
  • Verifications are counted and shown on the admin dashboard

Member portal

A home for people who have certificates.

  • Register, or activate from an emailed link; one sign-in page for staff and members
  • Dashboard with recent certificates, and a profile page
  • Certificate preview and PDF download
  • A course resources page with videos and materials

Under the hood

The engineering that does not show up on a screenshot.

Security

Sign-in, uploads and spam.

  • Passwords hashed with BCrypt; sign-in lockout after repeated failures, with staff and member lockouts kept separate
  • Sessions expire, and every admin page checks sign-in before it loads any data
  • Uploads limited to allow-listed file types, stored under random filenames, and sent through a one-time ticket
  • An audit trail of admin sign-ins and changes, and spam holds on public comments
  • Visitor IP resolved from Cloudflare, Akamai or proxy headers

Reliability under load

A room of people on one QR code.

  • Blazor Server circuits tuned for flaky mobile connections: 30-minute retention, 300 retained circuits and a larger render-batch buffer
  • That is what lets a per-second quiz timer survive a short disconnect without forcing a reload

Performance

Keeping pages quick.

  • In-memory caches for courses, categories, the calendar and articles
  • A five-minute cache with a stampede lock on the live feeds, and a one-hour cache header on the sitemap

Data and email

The plumbing.

  • EF Core on MariaDB/MySQL through a DbContext factory, across 36 data models
  • One shared export helper for Excel, CSV and PDF
  • Seven HTML email templates: certificate invite and ready, member activation, registration, message, survey and article submission notifications