Building Kamys Driving School: From Brief to Launch

March 3, 2025 (6mo ago)

Overview

Kamys Driving School needed a fast, modern website to showcase services, coverage, testimonials, and contact flows — with a simple admin area to manage reviews. I delivered a responsive, accessible app that loads fast on mobile and is easy to maintain.

Live site: kamysdrivingschool.co.uk

Tech Stack

  • Next.js App Router (React 18) + React
  • TypeScript
  • Tailwind CSS for styling
  • Firebase (Auth + Firestore + Storage)
  • Mapbox for coverage map
  • EmailJS for contact form

This combination keeps content dynamic where needed (reviews/contact) while keeping the core site statically generated for speed and reliability.

Goals and Requirements

  • Clear service pricing and packages
  • Coverage map with interactive areas
  • SEO-friendly pages and metadata
  • Admin dashboard to approve/manage testimonials
  • Contact/booking form with email notifications
  • Mobile-first design with strong lighthouse scores

Information Architecture

  • Home (hero, USP, services, CTA)
  • Services (packages, pricing, FAQs)
  • Coverage (Mapbox map with markers and service radius)
  • Testimonials (public list)
  • Contact (EmailJS form + server-side validation)
  • Admin (Firebase auth, review moderation)

Firebase Integration

I used Firebase for parts that truly benefit from dynamic data and an authenticated workflow:

  1. Auth: Email/Password for the owner; RLS via custom claims (admin only)
  2. Firestore: reviews collection with fields: name, rating, comment, approved, createdAt
  3. Storage: Optional image uploads for badges/certificates

Admin actions are routed through server components/actions so that credentials are never exposed on the client. Writes are validated; only approved: true reviews are shown publicly.

Deployment & Performance

  • Statically generated core pages with ISR for reviews (revalidate) to keep content fresh
  • Assets optimized and preloaded hero font for CLS stability
  • Lighthouse results: 95–100 on PWA metrics for mobile

DX and Maintainability

  • Components composed with Tailwind and headless patterns
  • Env handling via Next runtime config and .env.local
  • Simple content updates: add/update Firestore docs or edit MDX content

Results

  • Faster time-to-first-meaningful-paint on budget devices
  • Owner can approve testimonials without dev support
  • Clear conversion funnel from hero → services → CTA

Closing

If you’re running a local business and want a site that’s fast, secure, and easy to manage, this pattern (Next.js + Firebase + Tailwind) is a great fit. I’m happy to adapt it for your needs.

LinkedIn