What I built
Blessed Kidz Learning Hub is a Singapore tuition centre, and they came to me wanting their website rebuilt. The old site was functional but dated — slow, awkward on mobile, and hosted on cPanel where every change felt heavier than it needed to be. The goal was a modern, responsive platform that could showcase their programmes, surface class schedules clearly, and make it easy for parents to enquire — all while running fast enough to feel snappy on a phone, since most parents browse on the go.
The stack was Next.js and TypeScript on the frontend, Resend for transactional emails, and Vercel for hosting. The design itself came from the client as a Figma file.
Working from the Figma file
The client had already invested in design and handed me a Figma file to work from. That made the build straightforward in the best way — instead of iterating on layout and visual decisions, I could focus on translating the designs faithfully into a real, responsive website.
I went section by section, building out reusable components for the recurring patterns (programme cards, schedule blocks, testimonial layouts, CTAs) and matching the spacing, typography, and breakpoints to what was specified in Figma. Mobile was a priority from the start since that's where most of the traffic was going to come from, so I built mobile-first and worked up to the larger breakpoints rather than the other way around.
Forms and enquiries
Enquiry forms are the main conversion path on a site like this, so I wanted them to feel solid. I used React Hook Form with Zod for validation — the same combination I reach for on most projects — and wired the form submissions up to Resend.
When a parent submits an enquiry, Resend sends a notification email straight to the centre so they can follow up quickly. The validation logic is shared between the client and server via the Zod schema, which means consistent error handling and no duplicated rules.
Migrating off cPanel
The old site was hosted on cPanel, which works but isn't where you want to be in 2025 if you care about performance, deployment speed, or developer experience. I moved everything over to Vercel, which gave the site automatic global edge caching, image optimisation, and zero-downtime deploys. DNS cutover went smoothly and the site has been noticeably faster ever since.
Adding JSON-LD for SEO
One thing the old site was missing entirely was structured data. I added JSON-LD across the key pages — Organization schema for the centre itself, EducationalOrganization where appropriate, and Course schemas for each of the programmes. Search engines and AI answer engines now have a much clearer picture of what the centre offers, which helps both with traditional rankings and with the newer wave of AI-driven search results.
What I'd do differently
The main thing I'd change is the image pipeline. The Figma export gave me PNGs, and while Next.js's image component handles a lot of optimisation automatically, I should have converted the source assets to WebP from the start. WebP files are significantly smaller than PNG at equivalent quality, and on a media-heavy marketing site that translates directly into faster loads on mobile — exactly the audience this site is built for.
Beyond that, the project came together cleanly. Having a finished Figma file to work from made the build predictable, and the move from cPanel to Vercel plus the JSON-LD additions gave the site a meaningful step up in both performance and discoverability.