PORTFOLIO PLATFORMCUSTOM CMSSERVERLESS

Blackline Restoration

Portfolio platform for premium automotive restoration business — public showcase website with real-time admin dashboard, intelligent image compression pipeline, and automated inquiry management.

VIEW LIVE SITE
91%
IMAGE COMPRESSION
16
REACT COMPONENTS
<100ms
RESPONSE TIME
56
TYPESCRIPT FILES

The Challenge

Blackline Restoration is a premium automotive restoration business specialising in classic vehicle preservation and custom builds. They needed a digital platform to showcase their portfolio and capture leads — but critically, the owner needed to manage everything independently without ongoing developer support.

The challenge: build a system sophisticated enough to handle high-resolution automotive photography (large files), real-time content updates, and automated inquiry workflows — while keeping the admin interface simple enough for non-technical use.

System Architecture

Public website + protected admin dashboard on serverless infrastructure

🌐

PUBLIC WEBSITE

Next.js 15.3 + React 19

Static site generation

Tailwind CSS 4

8+ public pages

4-tier service classification

SEO optimised

🔐

ADMIN DASHBOARD

Protected authentication

Real-time Firestore sync

Project CRUD operations

Image upload + compression

Inquiry management

CSV export

☁️

SERVERLESS BACKEND

Firebase Cloud Functions

Firestore (3 collections)

Firebase Storage CDN

SendGrid email automation

Auto-scaling (10 instances)

Firebase Hosting

Image Compression Pipeline

Multi-tier compression achieving up to 91% file size reduction

HIGH
2MB / 85% quality
1920px
MEDIUM
1MB / 70% quality
1920px
LOW
0.5MB / 50% quality
1920px
THUMBNAIL
0.1MB / 70% quality
400px

Web Worker Processing

Compression runs in background Web Workers, preventing UI blocking during multi-image uploads. Users see real-time progress feedback while images process asynchronously.

Batch Upload Operations

Files processed in batches of 10 using Promise.allSettled for fault-tolerant uploads. Individual failures don't cascade — successful uploads complete while errors are logged for retry.

Storage Cost Reduction

91% average compression reduces cloud storage costs proportionally. Automatic thumbnail generation enables fast gallery loading while preserving full-resolution originals for detailed views.

Admin Dashboard

Project Management

Full CRUD for gallery projects with before/after image categorisation, 6-slot featured homepage management with priority ordering, and unlimited images per project with drag-and-drop reordering.

Inquiry Pipeline

4-state workflow (new → reviewed → responded → archived) with automated email notifications via SendGrid, inquiry tracking, and CSV export for business analytics.

Real-Time Sync

Firestore subscriptions enable live dashboard updates across multiple admin sessions. Optimistic UI updates provide sub-100ms perceived response times with automatic conflict resolution.

Search & Filter

5 sort criteria (date, title, featured, visibility, service type) with bidirectional sorting, multi-filter combinations, and full-text search across 9 fields.

4-Tier Service Classification

1

Refresh & Preserve

Maintenance and protection for well-kept vehicles

2

Heritage Restoration

Period-correct restoration to original specifications

3

Coachbuilt Restoration

Complete rebuilds with custom bodywork

4

Signature Commission

Bespoke builds to client specifications

Each tier has distinct visual identity, tabbed navigation, and service-specific inquiry routing to streamline customer journeys.

Technology Stack

FRONTENDNext.js 15.3, React 19, TypeScript 5, Tailwind CSS 4, Static Site Generation
BACKENDFirebase Cloud Functions v2, Node.js 18, SendGrid API
DATABASEFirestore (3 collections), real-time subscriptions, batch operations
STORAGEFirebase Storage CDN, organised folder structure, automated cleanup
IMAGEbrowser-image-compression 2.0.2, Web Workers, 4 compression profiles
HOSTINGFirebase Hosting, SPA routing, auto-scaling

Results

Business Impact

  • 75% faster time-to-publish for new projects
  • Zero ongoing developer dependency
  • Automated inquiry capture and notification
  • Professional showcase for premium services

Technical Delivery

  • 91% image compression reducing storage costs
  • Sub-100ms response times with optimistic UI
  • Real-time sync across admin sessions
  • Serverless auto-scaling infrastructure

Need a Portfolio Platform?

From showcase websites to custom CMS solutions — let's build your platform.

GET IN TOUCH