LumiCell Skin Science

/ The Challenge

Give a clinic/aesthetics business a branded, self-serviceable online catalog — one where non-technical staff manage products and blog content without touching code — and wire up a real Mexican payment path (Conekta, MXN, OXXO/SPEI) without a full engineering team behind it. The catalog itself is professional-grade inventory (fillers, toxins, lipolytics, topical anesthetics), which raised the bar on legal/tax accuracy (IVA treatment, shipping thresholds) and on presenting clinical products with the right tone and clarity.

/ Approach

1. 01

   Astro + Bun on the Apollo template. Started from a base e-commerce setup and re-architected it: static rendering for everything except three server routes (Conekta's two API endpoints and the Keystatic admin UI), so most of the site is prerendered at build time and fast by default. React 19 islands handle the interactive pieces — cart, product detail, search.

2. 02

   Catalog and content modeled as external, structured data. Products live in Airtable (Spanish columns) and sync into a static JSON file via a script that also optimizes every image with sharp (WebP, EXIF-aware, max 1400px). Blog posts are authored in Keystatic and commit straight to the repo as Markdoc. Both pipelines let staff update the site without a developer, and both are deliberately manual/build-time rather than live-fetched — sync is a conscious choice, not an oversight.

3. 03

   Conekta hosted checkout, verified server-side. /api/checkout creates a hosted-payment order (card, OXXO cash, SPEI bank transfer); on completion, Conekta's webhook triggers a re-fetch of the order directly from Conekta's API rather than trusting the webhook payload, and only confirmed paid orders get written back to Airtable's CRM table. Money is handled in MXN integer cents throughout, with IVA modeled as included in list price rather than added at checkout — both explicitly flagged in code as assumptions to confirm with an accountant.

4. 04

   Feature-flagged rollout. Cart, checkout, the diagnostics quiz, and a 'near you' locator are all gated behind flags, with a WhatsApp inquiry CTA as the fallback primary action. That let the storefront go live and start taking inquiries before the payment gateway was fully proven out — de-risking launch instead of blocking it on one unverified integration.

/ Selected Technical Challenges

• Webhook integrity over webhook trust. Rather than acting on whatever the Conekta webhook says, the handler re-fetches the order from Conekta's API and only records a sale once payment_status is independently confirmed as paid. It also always returns HTTP 200 — even on internal errors — specifically to stop Conekta's retry logic from hammering the endpoint on a logging hiccup, with the actual error logged instead.

• Background video reliability. Two autoplay hero/background videos were hand-compressed offline (roughly 9.4MB→3.8MB and 8.1MB→2.8MB) before being committed, since the sync pipeline deliberately doesn't transcode video. A recurring bug — a black frame after client-side navigation — took several iterations to fix (posters, eager-load with resume-on-canplay) before it was resolved by moving off Astro's SPA-style view transitions entirely.

• Template-to-storefront navigation bug. The original template used Astro's client-side router; on real WebKit (iOS Safari) it corrupted browser history and scroll restoration, with the back button landing on the wrong page. Verifying this against an actual WebKit engine, rather than assuming Chrome-based testing was sufficient, was what surfaced it — the fix was reverting to native multi-page navigation.

/ Outcomes

• Fully CMS-driven catalog — non-technical staff update products and blog content with zero code changes.

• Payment integration built and wired end-to-end.

• Static, prerendered build with per-product structured data (JSON-LD), optimized imagery, and SEO-friendly taxonomy.

• Real bug fixes verified against actual device engines (iOS WebKit), not just desktop testing.

/ Built With