Mutiara Islam App is a PPDB (new student admission) system built for Raudhatul Athfal Mutiara Islam Kendari, built from feeling that a generic Google Form fell short and carried none of the school's own branding. It replaces that manual process, Google Forms plus a spreadsheet for tracking, with a centralized registration form for parents and a full admin dashboard for the school, both running from a single Next.js codebase split across two subdomains.
A scrollable look at the finished site, exactly as a visitor would browse it.
Desktop
Mobile
The tools and technologies that came together to bring this project to life.
Each project draws on a mix of disciplines, here's how they came together on this one.
A closer look at what the finished product offers, the obstacles along the way, and what came out of it.
Routing Two Subdomains From One Codebase
The public registration form and the admin dashboard needed to live on two different subdomains while sharing a single Next.js deployment, solved with a routing layer that rewrites requests based on the incoming host header.
A Dropdown That Rendered Dark Inside a Light Page
Select dropdowns render through a portal outside the page's own styling context, so they defaulted to a dark theme even inside an otherwise light-mode page, fixed by explicitly overriding their color classes per context.
Browser Autofill Overriding Field Colors
Selecting a saved value from the browser's autofill suggestions bypassed the form's usual field styling, requiring dedicated CSS rules covering both the WebKit-specific and standard autofill states, plus the active state.
Emails Not Sending Before the Function Froze
The hosting platform could freeze the server function before the email notification finished sending, fixed by wrapping it in a background task that keeps running after the response is already sent.
Adapting to a Framework Rename Mid-Build
A major framework version upgrade mid-project renamed a core routing convention and changed a cache invalidation API, requiring the routing and caching logic to be adjusted to the new conventions.
How this project changed things for the business and its users after launch.
Centralized registration system
Images under 200KB
PageSpeed green across all 4 categories
One-click WhatsApp follow-up
One-click registration toggle
Zero infrastructure cost
Before
Registration ran through a generic Google Form and a spreadsheet, with no branding of its own and manual work needed to track status, follow up with parents, and keep records organized.
After
A centralized system now handles registration, status tracking, and admin workflows in one place, removing manual spreadsheet upkeep.
Before
High-resolution images across the site, not just one section, risked slowing down every page.
After
Every image across the site is compressed to WebP and kept under 200KB, keeping pages fast without a visible drop in quality.
Before
Early performance was inconsistent across the four Google PageSpeed categories.
After
Continuous optimization of images, JS, and CSS delivery brought all four categories into the green.
Before
Following up with each parent meant manually finding their WhatsApp number in a spreadsheet.
After
A one-click WhatsApp button with a pre-filled greeting template speeds up admin follow-up directly from the dashboard.
Before
The manual process had no clean way to signal that registration was closed between admission cycles.
After
Admins can toggle registration open or closed directly from the dashboard, automatically showing visitors a closed message.
Before
A dedicated admission system risked adding an ongoing hosting or software cost for the school.
After
Built entirely on free tiers, hosting and Google Sheets as the database, keeping infrastructure cost at zero.
