Websites and an internal management system for a home tuition service

Overview

A comprehensive full-stack tutoring platform featuring a hybrid SSR/client architecture, real-time database integration, advanced animations, and robust SEO optimization.

I worked on three systems for this client: the public website, an internal management system and a WordPress website.

The problem

The tutoring service required a highly discoverable, professional digital presence capable of securely capturing student enrollments and tutor registrations while providing an engaging, premium user experience.

What I built

Developed an SEO-optimized Next.js 14 platform with a centralized Firebase backend. The application features comprehensive API layers for onboarding, interactive GSAP animations, and integrated Google Maps for location context.

Results

• Successfully built and deployed a production-ready, highly interactive platform optimized for both search engines and user conversion.
• Established a highly scalable, centralized data management architecture using reusable UI primitives and separated concerns.
• Delivered a responsive, premium user experience featuring custom theming, dark mode, and seamless form validations.

Management system

An internal management dashboard for TOTW that securely handles sensitive financial and student data, automates document generation, and implements strict role-based access control (RBAC) to streamline administrative workflows.

The problem

Administrative processes were manual and time-consuming, requiring a secure, centralized system to automate document generation & perform internal operations while strictly restricting access to sensitive financial and student data based on user roles.

What I built

Developed a robust dashboard with Role-Based Access Control (RBAC) that securely stores data and automates the creation of branded PDF documents, managing tutors, students, and administrative tasks, & improving workflow efficiency.

Results

• Improved operational efficiency by automating the generation of repetitive administrative documents.
• Secured sensitive company data by successfully implementing strict Role-Based Access Controls (RBAC).
• Streamlined overall data management workflows through a centralized, easy-to-use Admin Dashboard.

WordPress site

A custom, responsive WordPress website for a home tuition service featuring an integrated fee calculator, complex registration flows, and a modern design.

The problem

Create a user-friendly website for a home tuition service that allows easy management of tutors and students.

What I built

Developed a mobile-optimized WordPress site utilizing the Astra theme and Elementor page builder. Integrated custom registration forms for distinct user types and built a dynamic fee calculator to improve the user experience and conversion rate.

Results

• Successfully delivered a fully responsive, brand-consistent website optimized for cross-platform performance.
• Streamlined the onboarding process for the agency by implementing distinct, automated registration forms for tutors and students.
• Enhanced user experience and upfront transparency by deploying a custom tuition fee calculator.

Technical notes

Website

Leveraged the Next.js 14 App Router for a hybrid rendering approach (SSR/Static), backed by Firebase Firestore accessed via strictly typed TypeScript service classes and barrel exports.

• Implemented highly dynamic SSR with rich metadata and Open Graph structured data. To maximize SEO performance and discoverability for a competitive local service business.

• Used Webpack Bundle Analyzer alongside dynamic imports. To maintain an optimized bundle size and fast load times despite integrating heavy libraries like GSAP and Google Maps.

• Managing complex GSAP animation lifecycles and avoiding SSR/client hydration mismatches. Implemented proper React lifecycle cleanup functions, strict browser environment checks, and progressive enhancement patterns for graceful degradation.

Management system

A full-stack Next.js application leveraging NextAuth for secure, role-based session management, connected to a cloud database for centralized storage, and utilizing client-side libraries for document rendering.

• Implemented Role-Based Access Control (RBAC) via NextAuth with bcryptjs encryption. To guarantee that sensitive internal data is exclusively accessible to authorized personnel based on strict organizational roles.

• Combined HTML2Canvas with React-PDF. To ensure the generated PDFs perfectly matched the company’s strict visual branding and formatting standards, which standard browser printing could not achieve reliably.

• Generating complex, highly-styled PDF documents directly from the web application without losing CSS styling or layout integrity. Abstracted the document generation process by taking high-fidelity DOM snapshots using HTML2Canvas and passing them into React-PDF for precise, production-ready document rendering.

WordPress site

A standard CMS architecture built on WordPress, leveraging the lightweight Astra theme framework for performance optimization and Elementor for flexible, responsive page layouts.

• Selected the Astra theme paired with Elementor. To balance the need for a highly customized, modern UI with the client's requirement for an intuitive, drag-and-drop content management system post-handoff.

• Utilized the Forminator plugin for data capture. To securely handle complex, multi-step form validation and routing for both student and tutor registration pipelines without writing extensive custom backend logic.

• Providing instant, accurate pricing to prospective students without requiring manual admin intervention or quotes. Engineered a custom, dynamic fee calculator directly into the frontend experience to compute tuition costs based on user-selected parameters.