Website + CMS Case Study

Commercial Shot Blasting

UK Industrial Shot Blasting Services

PremierBlasting/commercial_shot_blasting|TypeScript 95%+|Public Repository

A comprehensive industrial website with 51 pages including 32 service area pages for local SEO, a full CMS system with WordPress-style content blocks, before/after gallery, blog, and HubSpot CRM integration.

Commercial Shot Blasting Website
51
Total Pages
Service areas, industries, blog, admin
32
Service Areas
Individual UK location pages
11
Database Tables
Full CMS with Drizzle ORM
24
Custom Components
BeforeAfterSlider, Maps, SEO
4
Industry Pages
Aerospace, Construction, Manufacturing, Retail
6
Test Files
Admin, auth, contact, upload coverage
Technology

Full Technology Stack

Every technology used to build Commercial Shot Blasting, from frontend to SEO infrastructure.

Frontend

React 19

Latest React with concurrent features

Tailwind CSS 4

Utility-first CSS framework

Framer Motion

Scroll animations and transitions

shadcn/ui

Accessible component library

Wouter

Lightweight client-side router

Lucide Icons

Consistent icon system

Backend

Node.js / Express 4

Server runtime and HTTP framework

tRPC 11

End-to-end typesafe API layer

Zod

Runtime schema validation

Superjson

Type-safe serialisation

Database & Storage

TiDB (MySQL)

Distributed SQL database

Drizzle ORM

TypeScript-first ORM with migrations

AWS S3

Image and file storage

SEO & Infrastructure

Structured Data (JSON-LD)

LocalBusiness schema markup

HubSpot Integration

CRM and form handling

Vite

Build tool and dev server

Vitest

Unit testing framework

TypeScript

End-to-end type safety

Architecture

Under the Hood

Explore the CMS system, database design, custom components, page architecture, and file structure.

WordPress-style CMS built with tRPC + Drizzle ORM

Page Content Sections

WordPress-style modular content blocks. Each page is composed of sections (hero, services, testimonials, FAQ) stored as JSON in the database. Admins can edit any section without touching code.

drizzle/schema.ts → pageContentSections

CMS Pages

Full page management with slug-based routing, meta descriptions for SEO, JSON content blocks, and publish/draft workflow.

drizzle/schema.ts → cmsPages

Service Management

Dynamic service pages with slug, title, descriptions, icons, images, and feature lists. All managed through the admin panel.

drizzle/schema.ts → cmsServices

Hero Carousel

Admin-managed hero image carousel with alt text, sort ordering, and active/inactive toggle.

drizzle/schema.ts → cmsHeroImages

Site Settings

Key/value configuration store for site-wide settings. Supports text, number, boolean, and JSON value types.

drizzle/schema.ts → cmsSettings

Blog System

Full blog with slugs, excerpts, featured images, author attribution, categories, tags (JSON), and SEO meta descriptions.

drizzle/schema.ts → blogPosts

Content Initialization

The CMS includes database seeder scripts that populate initial content via the API, ensuring consistent setup across environments.

The Challenge

Premier Blasting had an outdated website failing to generate leads in a competitive UK industrial services market:

  • Poor mobile experience causing high bounce rates (78%)
  • Zero organic visibility — not ranking for any relevant keywords
  • Slow page load times (8+ seconds) hurting user experience
  • No clear call-to-actions or lead capture mechanisms
  • No local SEO presence across their 32+ UK service areas

What We Built

We delivered a comprehensive 51-page website with a full CMS backend:

  • 32 service area pages targeting every major UK city for local SEO dominance
  • WordPress-style CMS with modular content blocks, so the client can edit any section
  • Interactive service finder — 3-step wizard guiding visitors to the right service
  • Before/after gallery with drag-to-compare slider showcasing real project results
  • HubSpot CRM integration with call tracking, quote popups, and lead analytics
Features

Key Features & Implementations

Interactive 3-step service finder wizard for customer guidance
Before/after photo slider for portfolio showcase
32 individual service area pages for local SEO dominance
4 industry-specific landing pages (Aerospace, Construction, Manufacturing, Retail)
Full CMS with WordPress-style content blocks
Blog system with categories, tags, and SEO meta
Before/after gallery with drag-to-compare slider
Customer testimonials with photo galleries and ratings
Interactive UK service areas map
Click-to-call tracking with analytics dashboard
HubSpot CRM integration for lead management
JSON-LD structured data for local business SEO
Cookie consent banner (GDPR compliant)
Floating call-to-action button on mobile
Quote request popup with form validation
Optimised images with lazy loading and WebP
SEO-friendly breadcrumb navigation
Admin dashboard for content, gallery, blog, and settings management
Gallery

Website Screenshots

A closer look at the key sections and features we built for Commercial Shot Blasting.

Commercial Shot Blasting Homepage Hero
Conversion-focused design with phone number prominently displayed
01

Professional Hero Section

Clean, authoritative hero with industrial imagery, triple CTA buttons (Get a Quote, View Our Work, Call Now), and comprehensive navigation featuring Services, Industries, and Areas dropdowns.

Interactive Service Finder Wizard
Reduces decision fatigue and increases lead quality
02

Interactive Service Finder

Intelligent 'Find Your Perfect Service' wizard with a 3-step progress bar and 12 material type options in a clean grid layout. Guides visitors to the right service based on their specific needs.

Service Cards with Professional Photography
Real photography builds trust and credibility
03

Service Portfolio Cards

Visually rich service cards featuring real project photography — Structural Steel Frames, Steel Container Blasting, and Factory & Warehouse Cladding with detailed descriptions and 'Learn More' links.

Extended Service Portfolio
18+ individual service pages for maximum SEO coverage
04

Extended Service Range

Comprehensive service coverage including Fixed Ladders & Step-Over Platforms, Warehouse Racking & Pallet Rack Frames, and Process Pipework — each with professional imagery and detailed descriptions.

Specialist Services Section
Targets long-tail keywords for each specialist service
05

Specialist Services

Full range of niche services — Telecom Masts & Lattice Towers, Floor Preparation, Shot Blasting & Powder Coating, Commercial Radiators, Vehicles, and Steel Doors & Roller Shutters.

Services

Services We Provided

Website Development

Complete rebuild with 51 pages using AI-enhanced design, human strategy, and React 19

Local SEO

32 service area pages targeting every major UK city

Lead Generation

Service finder wizard, quote popups, and HubSpot CRM integration

Content Marketing

Blog system, industry pages, and AI-generated service content

The AI Advantage

How AI Transformed This Project

3x Faster Development

AI-assisted coding and content generation reduced development time from months to weeks. 51 pages, 11 database tables, and a full CMS — completed in under 4 weeks.

Cost Efficient

AI automation eliminated repetitive tasks across 32 service area pages and 4 industry pages. More value delivered per pound spent than traditional agency development.

Enhanced Quality

AI-generated SEO content, structured data markup, and optimised images across all 51 pages. Consistent quality that would be prohibitively expensive to achieve manually.

Want a website like this for your business?

We build custom CMS platforms, local SEO systems, and lead-generating websites — powered by AI, delivered in weeks.

Request a Demo
"Optimised Marketing transformed our online presence. We went from invisible to industry leader in just 6 months. The leads keep coming in and our phone doesn't stop ringing."
JM

James Mitchell

Managing Director, Commercial Shot Blasting

They Own Their Code

Commercial Shot Blasting owns every line of code in a private GitHub repository. They can update content by prompt, hire any developer to extend it, or take it to a different host — no lock-in, no permission needed.

PremierBlasting/commercial_shot_blastingPrivate
client/React frontend, pages, components
server/API routes, CMS, lead management
drizzle/Database schema & migrations
package.json
README.md
Private GitHub repo
Full admin access
Update by prompt
No lock-in

Ready for Similar Results?

Get a free audit of your website — AI-enhanced and expert-reviewed — and discover how we can help transform your digital presence.

Cookie Preferences

We use cookies to enhance your experience, analyze site traffic, and for marketing purposes. By clicking "Accept All", you consent to our use of cookies. Read our Privacy Policy and Terms of Service for more information.