E-commerce

Architecture

A deliberately light “database-free” architecture: instead of a CMS and SQL, file storage plus a Google Sheets integration acting as a convenient content panel.

• The data source is the Google Sheets API: one spreadsheet, a separate sheet per category. A PHP sync script pulls the data through the API and saves it as JSON — the content manager maintains the product range in a familiar spreadsheet and the site updates at the press of a button.
• Image localisation: during sync, external product photos are downloaded to the server, converted to WebP and renamed by slug. Idempotent, with a fallback if something fails.
• An override layer: manual edits from the admin panel (meta tags, hidden products, ordering) are applied on top of the spreadsheet data — the spreadsheet stays the source of truth, but any field can be overridden locally.
• Server-side rendering of the catalog for proper internal linking and SEO; client-side JS only handles filtering and sorting.

Key features

Catalog and products: 9 categories, a single server-side template for both the product page and the catalog; product pages with a gallery, photo switching, specifications and “similar products” / “from this collection” blocks; client-side filtering by price (dual slider), model, colour and collection, plus sorting.

Cart, order, payment: a client-side cart (localStorage), checkout and one-click purchase, online payment via Ozon SBP, an order status page that polls the payment, and new-order notifications in Telegram through a bot.

Reviews: a form with up to 4 photo uploads and three layers of anti-spam protection (honeypot + fill-time check + arithmetic captcha), stored as JSON and moderated through the admin panel.

A new-arrivals subscription that stores the subscriber list and shows it in the admin panel.

Custom admin panel

Entirely hand-written, with authentication on PHP sessions.

• A dashboard with per-category statistics.
• One-click manual sync with Google Sheets, with a result log.
• Viewing and editing the products in each category, including meta tags (title/description) for SEO.
• Adding manual products on top of the synced ones and editing the homepage content.
• Review moderation, a subscriber list and a sync log.
• Service tools: batch image optimisation and system junk cleanup.

Performance (PageSpeed Insights)

The site was brought up to 90–100 Performance on desktop and mobile.

• Responsive image sizes: for every product photo the sync generates derived sizes (product page ~600px, thumbnail ~160px) alongside the original used in the gallery — product images are 65–70% lighter, and the thumbnails under the main photo went from ~65 KB to ~2 KB.
• WebP everywhere — products and logos (via <picture> with a fallback).
• Cumulative Layout Shift eliminated: explicit width/height on every image.
• Load prioritisation: fetchpriority on the main image (LCP), lazy-loading for the rest, preconnect to the analytics domain, defer on scripts.
• Contrast, headings and fonts tuned for mobile.

SEO

• Schema.org / JSON-LD: Product + Offer (dynamic availability and priceValidUntil), BreadcrumbList on product pages, Organization + WebSite on the homepage.
• Canonical URLs, keyword-first title tags, a correct heading hierarchy, <main> landmarks and semantic markup.
• Auto-generated sitemap.xml and robots.txt.
• A YML feed for Yandex.Direct (product campaigns, smart banners) that refreshes itself after each catalog sync.
• Accessibility: ARIA labels, WCAG contrast, accessible navigation.

Analytics

Full e-commerce analytics on Yandex.Metrica: goals and a dataLayer on the key actions (add to cart, order, one-click purchase, successful payment, subscription), protection against double-firing goals, webvisor and clickmap. Purchases are tracked with de-duplication during payment polling.

What makes it interesting

• Zero dependence on heavy infrastructure: no CMS, no SQL, no framework — and still a full store with payments, analytics and an admin panel.
• Google Sheets as the content backend — an unconventional integration, but a convenient one for the client.
• Performance as a deliberate priority: image optimisation is built into the data pipeline rather than bolted on afterwards.
• The full cycle by one person: architecture, backend, frontend, integrations, SEO, deployment and support.

Architecture

A static file structure with no DBMS and no template engine: each product is its own folder with an index.php and images, prices are pulled out into variables in a single shared PHP file, categories (mixer taps, shower systems, spare parts, accessories) form a catalog of nested folders, and shared blocks (header, menu, footer) are pulled in as includes. A deliberately blunt approach, but transparent and dependable for a static product range.

Catalog and products

Product page: gallery with zoom, colour selection by switching between variants, a quantity counter that recalculates the price on the fly, and breadcrumbs with Schema.org markup. The cart is client-side (localStorage), with discount coupons and free delivery above a threshold amount.

Orders and payment

Orders are kept in a file structure: each one gets a folder with its status, the customer's details and a generated order page. Online payment by card and via SBP through Tinkoff acquiring (payment session over the API, redirect to checkout, automatic status change on successful payment); alternatively by bank details (QR + PDF) or cash. The customer receives a tracking code and a status tracking page.

Admin panel

Kept as simple as possible: a single log of all requests where every row carries action links — “paid / fulfilled / closed”. The manager handles orders straight from the log: confirms payment, changes the status, closes it. Exactly as much functionality as the order flow needs, with no DBMS and no heavy interface.

Reviews

Review import from marketplaces (Ozon, Wildberries): a parser reads saved pages, picks out highly rated reviews, cleans and deduplicates them, and puts them into a single list that loads more as you scroll. The links point back to the original marketplace listings.

Notifications

When an order is placed, the customer receives an email and an SMS with the order number and tracking code.

SEO

Unique title/description on every page, human-readable URLs following the catalog structure, breadcrumbs with structured data, sitemap.xml, robots.txt and a favicon — a basic but deliberate technical minimum.

What makes it interesting

An early “from scratch, from a mockup, no CMS or frameworks” build, put together by hand in about a week (back before AI tooling) — and still a working store with real online payments and order processing. The same client later rebranded to Wergrauf on a mature data-driven architecture, so the two projects together show how the approach grew.