Civic Concierge — Vehicle Registration Web Platform

Technology Stack

Context & Background

Civic Concierge is a real client project built for a Belgian automotive services company that handles vehicle registration, number plate requests, and related administrative tasks on behalf of individuals and businesses. The client needed a professional online presence that could serve customers in five languages and seamlessly funnel them into WhatsApp conversations with staff — all while keeping infrastructure costs at zero.

The core challenge was building a polished, production-grade platform without a traditional server or CMS. The solution uses a fully static architecture: HTML partials injected at runtime, all business data loaded from JSON files, and a self-hosted n8n instance handling the webhook-based chatbot and lead capture — meaning the site deploys to any static host with no database or server-side language required.

Screenshots

Open Full Size

Open Full Size

Open Full Size

Realisations

The delivered platform covers the following features and systems:

• Runtime i18n Engine: A fully custom internationalization system supporting English, German, Turkish, Arabic, and Russian — with automatic browser language detection, RTL layout switching for Arabic, and zero build-step overhead. All translations are stored in JSON files and swapped in the DOM at runtime.
• WhatsApp Checkout Wizard: A guided 3-step booking flow that collects the customer's service type, vehicle details, and preferred contact time, then assembles a pre-filled wa.me deep-link that opens a WhatsApp conversation with the correct message already typed — no backend required for the handoff.
• n8n Chatbot Integration: An embedded chatbot powered by a self-hosted n8n webhook. The chatbot handles common questions with a scripted decision tree and falls back gracefully to an offline mode when the webhook is unreachable, using sessionStorage to persist the conversation across page navigations.
• Lead Capture via n8n: Contact form submissions are routed through an n8n webhook that handles validation, stores leads, and triggers email notifications — entirely server-free from the front-end perspective.
• JSON-Driven Content Layer: All business data (services, pricing, FAQs, office locations, team members) is stored in versioned JSON files under /assets/data/. The UI fetches and renders this data at runtime, making content updates a matter of editing a JSON file with no HTML changes needed.
• HTML Partial Injection: A lightweight include.js module injects shared partials (header, footer, cookie banner) into every page at load time — giving the feel of a template engine with no server or framework required.
• GDPR Cookie Consent: A versioned cookie consent system built from scratch: remembers user preference in localStorage, supports granular accept/reject, and re-prompts automatically when the consent version is bumped.
• JSON-LD Schema Markup: Every page includes structured AutomotiveBusiness schema markup (JSON-LD) for search engine visibility, covering business name, address, opening hours, contact details, and service offerings.
• IntersectionObserver Animations: Scroll-triggered reveal animations on service cards and content sections, implemented with the IntersectionObserver API for performance — no animation library dependency.
• Zero-Dependency Architecture: The entire frontend runs as ES Modules with no bundler, no npm, and no build step. Tailwind CSS is loaded from CDN. The site deploys to Netlify (or any static host) as plain HTML files.
• Responsive & Accessible: Mobile-first layout with full keyboard navigability, ARIA labels on interactive elements, and semantic HTML throughout.

Architecture Overview

The platform deliberately avoids traditional server-side complexity. The front-end is a collection of static HTML pages enhanced by a small ES Module layer: include.js handles partial injection, i18n.js drives translations, and data-loader.js fetches and renders JSON content. The WhatsApp integration requires no API credentials — it constructs wa.me URLs client-side. The only external service dependency is the self-hosted n8n instance, which the site calls via fetch; if it's unreachable, the chatbot silently switches to offline mode.

My Role

I designed and built the entire platform solo — from the initial architecture decisions through to deployment. This included the i18n engine, the WhatsApp wizard, the n8n chatbot integration, the JSON content layer, and the GDPR consent system. The project gave me hands-on experience shipping a production site to a real client with real users, with full ownership of every technical and design decision.