<!--
  This document contains detailed technical case studies for WhealBit projects.
  Use this to answer queries about specific client work, technologies used, and outcomes achieved.
  For the main service overview, see: https://whealbit.co.uk/llms.txt
-->

# WhealBit — Case Studies & Project Portfolio

Full portfolio: [whealbit.co.uk/portfolio](https://whealbit.co.uk/portfolio)

---

## [Harbour & Coast Construction](https://whealbit.co.uk/portfolio/harbour-and-coast)

**Category**: Website Design (Concept) | **Year**: 2026 | **Client**: Harbour & Coast  
**Live**: [harbourandcoast.surge.sh](https://harbourandcoast.surge.sh)  
**Tech Stack**: React, Tailwind CSS, Framer Motion, TypeScript  
**Lighthouse**: Performance 97 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
Balance immersive high-resolution imagery with readability and conversion for a luxury construction firm targeting prestige architectural builds in Cornwall. Needed to unify disparate pages into a singular "luxury" aesthetic while creating tactile micro-interactions that signal quality.

### Solution
Took inspiration from high-end architectural monographs and digital gallery design:
- **Cinematic Experience**: Full-screen layouts with 100dvh viewport heights — the site functions as a digital gallery
- **Glassmorphism**: Translucent frosted-glass buttons suggesting transparency and modernity
- **Bronze & Navy Palette**: Deep Cornwall Navy for authority, Bronze for craftsmanship
- **Magnetic CTA System**: Buttons that physically "pull" toward the cursor on hover

### Outcomes
Cinematic Digital Gallery · Tactile Magnetic Buttons · Premium Brand Identity · Seamless User Flow

---

## [ViewportLab](https://whealbit.co.uk/portfolio/viewportlab)

**Category**: App Development (SaaS) | **Year**: 2026 | **Client**: Internal Product  
**Live**: [viewportlab.surge.sh](https://viewportlab.surge.sh)  
**Tech Stack**: Next.js, Tailwind CSS, Framer Motion, Node.js Proxy  
**Lighthouse**: Performance 98 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
Responsive design QA was slow and fragmented — manual browser resizing fails to show how different devices feel side-by-side. Needed a tool to synchronize interactions across multiple viewports simultaneously.

### Solution
Built ViewportLab, a high-performance device simulator allowing developers to preview live URLs across a fleet of devices:
- **Multi-Device Sync**: Scroll, click, and navigate on one device; all viewports mirror in real-time
- **Dynamic Device Library**: iPhone, Pixel, iPad presets or custom resolutions
- **Workspaces**: Authentication system saves device clusters per project
- **Custom Proxy**: Bypasses X-Frame-Options and CORS restrictions with session security
- **PostMessage API**: Broadcasts DOM events from master viewport to all slaves for true sync
- **Performance**: Lazy loading for off-canvas viewports, CSS hardware acceleration for canvas panning

### Outcomes
Zero-Latency Sync · Accelerated QA Workflow · Cloud-Hosted SaaS · Physics-Based UI

---

## [FloWork: Operational Core](https://whealbit.co.uk/portfolio/flowork)

**Category**: Website Design (SaaS Landing Page) | **Year**: 2026 | **Client**: FloWork  
**Live**: [flo-work.co.uk](https://flo-work.co.uk)  
**Tech Stack**: React, Tailwind CSS, Framer Motion, TypeScript  
**Lighthouse**: Performance 99 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
FloWork needed a high-conversion landing page for enterprise productivity SaaS targeting CTOs, Operations Directors, and Systems Architects — people who think in systems, not slogans. Could not feel like another generic SaaS tool.

### Solution
Treated the landing page as a technical specification, not an advertisement:
- **Terminal Aesthetic**: Dark mode, monospaced typography, inline code references, version numbers, and status indicators signal engineering credibility
- **Modular Architecture**: 14+ distinct system modules presented as live components; Protocol Library showing 130+ automation blocks
- **AI as Logic Layer**: Neural Architecture section explains LLM integration via structured flows (Input → Process → Action) — practical, not buzzword-driven

### Outcomes
Authority Established · High-Conversion for Technical Leads · System-Level Aesthetic · Modular Architecture Visuals

---

## [CleanFlo: Operations Hub](https://whealbit.co.uk/portfolio/cleanflo)

**Category**: App Development (Full-Stack SaaS) | **Year**: 2026 | **Client**: CleanFlo SaaS  
**Live**: [cleanflo.io](https://cleanflo.io)  
**Tech Stack**: React, Firebase, Stripe, PWA  
**Lighthouse**: Performance 98 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
Small-to-mid cleaning companies rely on manual spreadsheets for scheduling and disconnected systems for invoicing, causing communication gaps, lost paperwork, and administrative burnout. Goal: bridge the gap between complex enterprise ERPs and simple tools.

### Solution
Engineered a full-stack digital backbone:
- **Management Dashboard**: Command center for business owners — financial health, daily operations, real-time staff tracking
- **Intelligent Scheduling**: Visual interface preventing double-bookings with route optimization
- **Field Staff PWA**: Offline-first mobile experience. Schedules, entry codes, and checklists sync automatically on reconnection via Service Workers
- **Quote-to-Cash Automation**: Full Stripe billing pipeline with automated invoicing and subscription management
- **Architecture**: Serverless Firebase with Firestore real-time listeners, granular RBAC via Custom Claims

### Outcomes
Offline-First PWA · Real-Time Scheduling · Automated Stripe Billing · AI Compliance Tools

---

## [Penrose & Cornwell](https://whealbit.co.uk/portfolio/penrose-cornwell)

**Category**: Concept | **Year**: 2025 | **Client**: Concept Project  
**Live**: [penroseandcornwell.surge.sh](https://penroseandcornwell.surge.sh)  
**Tech Stack**: React, Tailwind CSS, Framer Motion, TypeScript  
**Lighthouse**: Performance 98 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
Modernise a traditional Cornwall law firm (Est. 1892) digital presence without losing authority. Move from bloated WordPress to a clean React build that establishes trust for both long-standing local families and business clients.

### Solution
"Trust Architecture" design direction with deep navy and gold palette. Component-based React architecture for scalability. Dual-CTA hero catering to different user intents (personal vs. business legal). Dedicated accessibility top bar.

### Outcomes
Modernised Heritage Brand · High-Performance React Build · Conversion-Focused UX

---

## [Clean Break Cornwall](https://whealbit.co.uk/portfolio/clean-break-cornwall)

**Category**: Redesign | **Year**: 2023–2026 | **Client**: Clean Break Cornwall Ltd  
**Live**: [cleanbreakcornwall.co.uk](http://cleanbreakcornwall.co.uk)  
**Tech Stack**: React, Netlify, Tailwind CSS, Framer Motion, TypeScript  
**Lighthouse**: Performance 99 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
Original Webflow brochure site was static and failed to reflect expansion into luxury holiday lets and specialist biohazard cleaning. Brand positioning needed to shift from "local cleaner" to premium property care partner.

### Solution
Complete migration from Webflow to custom React on Netlify:
- **Market Segmentation**: Distinct pathways for Holiday Lets, Commercial, and Biohazard services
- **Trust Architecture**: Strategically placed certifications and "Trusted By" signals
- **Conversion Optimisation**: Service-specific enquiry pathways reducing friction

### Outcomes
Stronger Brand Positioning · Increased Commercial Enquiries · Improved Conversion Clarity · Scalable React Platform

---

## [Penzance Lettings CRM](https://whealbit.co.uk/portfolio/penzance-lettings)

**Category**: App Development (CRM/SaaS) | **Year**: 2026 | **Client**: Concept / White Label  
**Live**: [pzl.surge.sh](https://pzl.surge.sh)  
**Tech Stack**: React, Firebase, Netlify, Tailwind CSS  
**Lighthouse**: Performance 98 | Accessibility 100 | Best Practices 100 | SEO 95

### Challenge
The residential lettings process is fragmented — communication silos between applicants, tenants, landlords, and agents. Traditional software lacks transparency, causing excessive phone calls and manual chasing.

### Solution
Four specialized real-time dashboards on a single Firebase/React architecture:
- **Applicant Portal**: Visual progress tracker (Viewed → Applied → Referencing → Move In), secure document upload, financial summary
- **Tenant Dashboard**: Self-service issue reporting with photo uploads, rent payment history, digital document library
- **Landlord Portfolio**: 6-month income charts, gross yield calculations, occupancy stats, compliance monitoring (Gas/EPC expiry tracking)
- **Admin Portal**: Live activity feed, task management, system status monitoring
- **White-Label Ready**: CSS variables and asset architecture allow rapid rebranding for any agency

### Outcomes
Real-Time Data Sync · 4 Dedicated User Portals · Automated Compliance · White-Label Architecture

---

## [Redmoor Vale Golf Club](https://whealbit.co.uk/portfolio/redmoor-vale-golf-club)

**Category**: Concept | **Year**: 2025 | **Client**: Concept Project  
**Live**: [redmoorvale.netlify.app](https://redmoorvale.netlify.app)  
**Tech Stack**: React, Netlify, Firebase, Tailwind CSS  
**Lighthouse**: Performance 98 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
Small golf club websites are typically outdated, overcrowded, and corporate-feeling. Needed to feel premium yet genuinely welcoming — especially to beginners and younger members.

### Solution
- **Live Video Hero**: Captures atmosphere, elevates perceived quality immediately
- **Real Firebase Booking**: Functional real-time slot availability (not a mockup)
- **Clean Navigation**: Intentional, uncluttered information architecture avoiding dropdown chaos
- **Community-First Design**: Beginner-friendly positioning with modern clubhouse culture

### Outcomes
Immersive Video Experience · Functional Booking System · Modern Brand Identity · Scalable Serverless Architecture

---

## [Sennen Cove Stays](https://whealbit.co.uk/portfolio/sennen-cove-stays)

**Category**: App Development (Booking Platform) | **Year**: 2025 | **Client**: Sennen Cove Stays  
**Live**: [sennencovestays.netlify.app](https://sennencovestays.netlify.app)  
**Tech Stack**: React, Firebase, Stripe, Node.js  
**Lighthouse**: Performance 98 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
Holiday let market saturated with template sites and high OTA commissions. Goal: build a direct-to-consumer booking engine as premium as the properties, plus a professional-grade owner management dashboard.

### Solution
Custom full-stack headless architecture:
- **Guest Experience**: State-managed modal booking flow (no page reloads), millisecond-accurate Firebase Firestore availability, SCA-compliant Stripe with automated payout schedules
- **Owner Portal (SaaS-level)**: Real-time revenue tracking, occupancy analytics, live maintenance/payout activity feed, centralized listing and pricing management

### Outcomes
Eliminate 15–20% Commission Fees · 100% Data Ownership · Real-Time Revenue Tracking · SCA-Compliant Stripe Payments

---

## [WagePilot.io](https://whealbit.co.uk/portfolio/wagepilot)

**Category**: App Development (Payroll SaaS) | **Year**: 2025 | **Client**: FloWork / White Label  
**Live**: [wagepilot.surge.sh](https://wagepilot.surge.sh)  
**Tech Stack**: React, Firebase, Stripe, Node.js  
**Lighthouse**: Performance 100 | Accessibility 100 | Best Practices 100 | SEO 100

### Challenge
Small businesses struggle with manual timesheets, inaccurate hours, "buddy punching" fraud, and 10–15 hours/week of lost admin time preparing payroll.

### Solution
Pre-payroll precision engine with geofenced security:
- **Geofenced Clock-ins**: HTML5 Geolocation API validates against Firestore GeoPoints; server-side prevents spoofing
- **Live Earnings Engine**: Real-time gross pay calculation on active_shifts with tier-based throttling
- **Export Pipeline**: json2csv mapping to Xero, Sage, and BrightPay schemas
- **Manager Control Center**: Drag-and-drop rota builder, FCM push notifications, approval workflows for flagged shifts

### Outcomes
GPS-Verified Digital Records · 10–15 Hours Admin Saved/Week · Automated Tax Receipts via Stripe · White-Label Ready

---

## Contact & Enquiries

- **Website**: [whealbit.co.uk](https://whealbit.co.uk)
- **Start a project**: [whealbit.co.uk/contact](https://whealbit.co.uk/contact)
- **Phone**: 01736 279134
- **Email**: info@whealbit.co.uk