How I Built Aditor: a Headless, SEO-First E-Commerce Store — with AI

The goal

Most e-commerce sites are a single WordPress theme doing everything. That’s easy, but it caps performance and SEO. I wanted to show I can build the modern alternative: a headless setup where a fast React storefront is fully decoupled from WooCommerce, and where SEO and security are designed in, not bolted on. The store had to be real — real products, real checkout, real search visibility — not a mockup.

The architecture I chose

I split the site into three deliberate layers:

• React storefront — the customer-facing site, built as a single-page app and prerendered to static HTML so search engines and social bots get real content instantly.
• A Node API proxy — a small server that holds the WooCommerce keys server-side and enforces security. The browser never sees a credential.
• WordPress + WooCommerce — used purely as a headless commerce engine (products, orders, customers) exposed over its REST API.

To make this reproducible, I containerised the whole backend with Docker, so the entire stack — WordPress, database, and API — spins up from one command. That’s the difference between a demo and something a team could actually run.

Technical SEO — where the real work happened

A React SPA is, by default, invisible to some crawlers: they get an empty page until JavaScript runs. As an SEO specialist, that was unacceptable to me, so I engineered around it:

• Prerendering — every route ships as static HTML with its own title, meta description, canonical URL, Open Graph tags and structured data — so a crawler sees a complete, indexable page immediately.
• Structured data (JSON-LD) — Organization, WebSite (with Sitelinks Search), Product, Breadcrumb and FAQ schema, so pages are eligible for rich results.
• On-page targeting — keyword-led titles and copy (e.g. “best perfume in Pakistan”), a clean heading hierarchy, descriptive alt text, and an XML sitemap + robots.txt.
• Core Web Vitals — inlined critical CSS, non-blocking fonts, deferred JavaScript and fixed layout dimensions took the site to a Cumulative Layout Shift of 0 and a Lighthouse SEO and Accessibility score of 100.

This is the part most “SEO people” can’t do and most developers don’t think about. Sitting in that overlap is the whole point of this project.

The AI SEO Copy Generator

Writing SEO product copy at scale is a real bottleneck for store owners and agencies. So I built a tool for it: enter a product, and it generates an optimised title, meta description, product description and keyword ideas that follow the exact on-page rules I use manually — with live character counts so you can see it hit the targets. The AI runs server-side through the same secure proxy, so the API key is never exposed to the browser.

→ Try the live AI SEO tool

Security — including recovering from a real attack

During the project the live site was compromised with an injected web shell. I treated it as a full incident: rotated every secret, rebuilt from a known-clean source, and hardened the whole stack. On the code side I found and fixed a serious flaw — the API let anyone read customer data and change accounts. I closed it by requiring verified login tokens and enforcing that a user can only ever touch their own data, then added rate limiting, security headers, sanitised errors and input validation.

I’m including this deliberately: handling a breach calmly and correctly is a more honest signal of skill than a site that simply never mentions security.

The stack

React · React Router · react-helmet-async · react-snap (prerender) · Node.js · Express · JWT · WordPress · WooCommerce REST API · Docker · Groq (LLM) · Lighthouse · Schema.org / JSON-LD