# Websites and an internal management system for a home tuition service

> A home tuition service needed to be found online, register students and tutors, and stop doing administration by hand. I built a Next.js website with a Firebase backend, an internal management system with role-based access that generates branded PDF documents, and a WordPress site with a fee calculator. I was the company's software engineer from April 2025 to April 2026.

Canonical page: https://www.abdullahkaleem.live/work/tutorontheway · Last updated: 2 October 2026

## Key facts

- Client: Education (home tutoring)
- My role: Software engineer
- Timeline: April 2025 - April 2026
- Services: [Business websites and e-commerce](https://www.abdullahkaleem.live/services/business-websites), [Internal tools and business software](https://www.abdullahkaleem.live/services/internal-tools), [Ongoing tech management](https://www.abdullahkaleem.live/services/tech-management)
- Status: live
- Live site: https://tutorontheway.com
- Stack: Next.js 14, TypeScript, Firebase/Firestore, React Hook Form, Zod Validation, Google Maps API, Tailwind CSS, GSAP, Vercel, Webpack Bundle Analyzer, Next-Themes, Next.js, NextAuth, MongoDB, HTML2Canvas, ReactPDF, React, WordPress, Astra, Elementor, Forminator

## 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

![Screenshot of the Tutor On The Way management system dashboard](https://www.abdullahkaleem.live/images/management_system_totw.webp)

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

![Screenshot of the Tutor On The Way WordPress website](https://www.abdullahkaleem.live/images/totw-wordpress.webp)

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.

## Next step

Need something similar? Contact: [contact form](https://www.abdullahkaleem.live/contact) or abdullahkaleemlive@gmail.com