SAP & AI Consultancy Website

The client is an SAP and AI consultancy that needed a public-facing site capable of doing three jobs at once: presenting a fairly deep service catalogue (17 SAP service lines, six industry verticals, a dedicated SAP AI/Joule offering), capturing inbound leads and job applications, and letting the client publish their own blog content without a developer in the loop. The site also had to speak to a genuinely international audience, which meant translations were a product requirement rather than an afterthought.

The build is a TanStack Start application — file-based routing with server functions — rendered server-side and deployed to Cloudflare Workers via Wrangler, with React 19, Tailwind v4 and a Radix/shadcn component layer for the UI. Content and auth sit on Supabase: a `posts` table backs the blog, Supabase Auth gates an `/admin` area, and Supabase Storage holds cover images. The admin side is a small CMS in its own right — a Tiptap rich-text editor with image upload, draft/published states, slug generation and tag handling. Notably, the Tiptap JSON is rendered to HTML inside a server function rather than in the browser, so the editor's render extensions never enter the public client bundle; the browser receives a finished HTML string plus a precomputed reading time. Contact and careers forms go through server functions to Resend, with hand-built table-layout HTML email templates (separate cyan/violet themes for enquiries vs applications), CV attachments forwarded to the hiring inboxes, and an auto-acknowledgement back to the applicant. A `/sitemap.xml` route is generated at request time by unioning the static pages with published blog slugs.

The internationalisation work is the most interesting engineering in the repo. Five locales are supported (English, French, German, Spanish and Arabic, with Arabic driving `dir="rtl"` and per-locale `lang`/`og:locale` tags), and locale is resolved server-side on every request in precedence order: URL parameter, then a year-long cookie, then a parsed `Accept-Language` header, then the default. Crucially the active dictionary is threaded through the router loader into a per-request React context rather than a module-level singleton — a deliberate choice, documented in the code, to stay correct under concurrent requests on the Workers runtime. Translations are typed dictionaries split per page, and the repo ships a reviewer-facing TRANSLATIONS.md that lays every string out side by side in all languages so the client can request copy changes by key.

Performance got the same treatment. A repeatable `scripts/optimize-assets.mjs` pass re-encodes photographic PNG/JPG to WebP at a 1920px cap and every hero MP4 to a 1280px H.264 `.web.mp4` with audio stripped and faststart enabled, extracting a WebP poster frame from each. A `BackgroundVideo` component then makes the poster the LCP element and only mounts the actual `<video>` once the section is near the viewport *and* the browser is idle, skipping the video entirely under `prefers-reduced-motion`. A WebGL aurora effect (ogl) is lazy-split into its own chunk so shaders stay out of the critical bundle. The repo's own CHANGES.md records the before/after of that pass — 23 MB of transfer down to 4 MB, Lighthouse performance 55 to 63, TBT 310 ms to 130 ms. The project also closes out properly: two handover documents walk through transferring the Supabase project, Resend account, Cloudflare hosting and domain into the client's own accounts with key rotation, so the client ends up owning their infrastructure.