H&S Consultancy Services Ltd

Project Overview

• Client: H&S Consultancy Services Limited
• Industry: Health & Safety (B2B)
• My Role: Full-Stack Development, Custom CMS & Google Workspace Integration
• Timeline: 8 Weeks (Q3 2025)
• Services: Custom Full-Stack Web App, Custom CMS, Google API Integration

The Challenge

The client, Pete, decided to launch his own consultancy after a distinguished 35+ year career in the health and safety industry. As a new business, H&S Consultancy Services Ltd. had incredible expertise but no digital presence.

They faced three core challenges:

1. Establish Credibility Instantly: The website had to immediately convey Pete's 35+ years of authority. It couldn't look like a "new" or "amateur" business.
2. Generate Leads from Day One: With no existing client base, the site's primary goal was to be a lead-generation engine, converting SME visitors into qualified prospects.
3. Enable Full Autonomy: Pete needed to establish himself as a thought leader and manage his own business. This required a simple way for him to publish articles and manage his own schedule without being dependent on a developer.

The Solution: A Pure Serverless Platform with Google Integration

We delivered a complete, custom solution built on a unified, serverless stack. This wasn't just a "website"; it was a high-performance, all-in-one business platform, ready to compete from day one.

1. A Professional, Component-Driven Frontend: I built a custom-designed, fully-responsive website using Next.js (App Router) and TypeScript. The entire UI was built with ShadCN UI, ensuring a clean, modern, and fully accessible (WCAG 2.1) experience that perfectly matched their "Making Safety Simple" brand.
2. A Fully Custom-Built CMS: Instead of a third-party, subscription-based CMS, I engineered a fully custom content management system for the H&S team. This was built directly into the Next.js application, providing a secure, high-performance, and completely bespoke dashboard. Pete gets the exact features he needs, with no monthly SaaS fees. He can now log in to write blog posts, update services, and manage testimonials from a platform built just for him.
3. A Robust, Integrated Backend: The entire backend is built using Next.js API Routes and Prisma. This serverless-first approach provides a secure, scalable, and highly efficient backend for the CMS, contact forms, and booking system.
4. Full Google Workspace Integration: To professionalize the business, I set up a full Google Workspace for the client.
5. • Consultation Booking: I integrated the website's booking system directly with Pete's Google Calendar API. This allows clients to book consultations in real-time and automatically creates calendar events, eliminating all manual scheduling.
   • Reliable Email: I configured the Google Workspace SMTP Relay to handle all transactional emails from the contact form, ensuring maximum deliverability and a professional email address (pete@hsconsultancy.co.uk).
5. The All-on-Vercel Hosting Model: This project uses my "Foundation Plan" stack in its purest form.
6. • Application & Database: The entire full-stack Next.js application, the API routes, and the Vercel Postgres database are hosted and managed by Vercel.

This model provides a seamless CI/CD pipeline, unmatched global performance, and zero server management overhead for the client.

Core Technologies Used

• Full-Stack Framework: Next.js 14 (App Router)
• Language: TypeScript
• UI: Tailwind CSS & ShadCN UI
• Backend: Next.js API Routes
• Database ORM: Prisma
• Database: Vercel Postgres
• Hosting & CI/CD: Vercel
• Email & Calendar: Google Workspace (SMTP Relay & Google Calendar API)

The Outcome

• A Professional Digital Presence: The client launched their new business with a fast, modern, and mobile-first website that builds immediate trust and clearly communicates Pete's 35+ years of expertise.
• A 98+ Google Lighthouse Score: The Vercel-hosted Next.js site is in the top percentile for performance, providing a great user experience and a powerful foundation for SEO.
• A Functional Lead-Gen Engine: The new site is built to convert, with clear CTAs, a simple contact form, and an automated booking system that feeds directly into Pete's Google Calendar.
• Full Client Autonomy: Pete is no longer bottlenecked by a third-party tool or developer. He is fully empowered by his own custom-built CMS to manage his content and by the Google Calendar integration to manage his schedule.