Maison Darlington
High-performance restaurant e-commerce platform powered by a custom real-time Google Sheets CMS
Problem
Maison Darlington constantly struggled with outdated online menus and pricing. Updating prices manually required either calling a developer every time (which was slow and costly) or editing raw code files directly (which risked breaking the site). As a result, the website quickly fell out of sync with kitchen reality, causing customer frustration over unavailable items and incorrect pricing.
Solution
Built a blazing-fast, custom e-commerce web application using React, Tailwind CSS, and Vite, coupled with a bespoke Google Sheets API synchronization engine. The restaurant owner manages menu items, daily pricing, and stock availability directly inside a familiar Google Sheet, while the website synchronizes dynamically in real-time.
How It Was Built (Architecture & Implementation)
Frontend & Shopping Cart (React + Vite + Tailwind)
Engineered a highly responsive, visually polished e-commerce interface featuring instant category filtering, item customization, and an intuitive shopping cart. Built with Vite and Tailwind CSS to ensure instantaneous page rendering and zero layout shifts across mobile and desktop devices.
Custom Google Sheets API Integration
Wrote a custom, lightweight backend synchronization layer directly interfacing with the Google Sheets API v4. Instead of relying on bloated third-party CMS plugins, the system securely fetches, caches, and transforms live spreadsheet data into structured JSON, keeping the frontend perfectly synchronized with the owner's spreadsheet edits.
WhatsApp Order Checkout Engine
Integrated a frictionless, conversion-optimized WhatsApp checkout workflow. Customers review their cart items and click 'Checkout', which automatically formats the entire order breakdown, delivery details, and price totals into a direct, pre-populated WhatsApp confirmation message to the restaurant.
Edge Infrastructure (Cloudflare & GitHub Pages)
Configured Cloudflare for global DNS management, edge caching, and strict SSL termination. Automated deployment pipelines via GitHub Pages ensure zero-downtime continuous delivery whenever code updates are shipped.
How I Improved It Over Time (Evolution & Iteration)
[ V1 (Static Menu Architecture) ]
Launched the initial version with a hardcoded React menu. While visually stunning, the client still depended on developer pull requests every time ingredient costs shifted or seasonal dishes were introduced.
[ V2 (Custom Google Sheets CMS Integration) ]
Engineered the custom Google Sheets synchronization integration. Completely eliminated developer maintenance bottlenecks—transforming menu updates from a multi-day engineering request into a 10-second spreadsheet edit by the restaurant owner.
[ V3 (Extreme Performance & Mobile SEO Optimization) ]
Conducted deep Core Web Vitals and PageSpeed audits. Implemented aggressive image compression, next-gen WebP formatting, code splitting, and Cloudflare caching headers. Soared mobile PageSpeed scores from 63 to 84, dramatically improving SEO rankings and mobile customer conversions.
Outcome & Business Impact
Live and actively used daily by Maison Darlington at maidarlington.com. The restaurant owner independently updates prices and seasonal offerings without writing a single line of code or paying maintenance fees. Demonstrates strong client-facing engineering, bespoke API integrations, and practical infrastructure optimization.
My Role & Execution
Sole Full-Stack & Infrastructure Engineer. Architected and developed the complete React/Vite frontend, engineered the custom Google Sheets API synchronization client, designed the WhatsApp checkout pipeline, and managed all Cloudflare DNS, CDN, and CI/CD infrastructure.
Key Learnings
- Architecting zero-maintenance client CMS solutions using Google Sheets API as a live data store
- Advanced Core Web Vitals optimization and edge caching strategies using Cloudflare CDN
- Conversion rate optimization (CRO) via frictionless WhatsApp direct-order checkout flows