My Store

Overview

“My Store” is a design-forward e-commerce experiment that pairs a fully static Astro storefront with a Stripe-based product catalog managed by bespoke Node scripts. I owned product design and front-end engineering, shipping the site live at https://store.andrewfree.me in 2026.

Tech stack • Astro + React islands + TypeScript • Tailwind CSS theming with CSS variables • Stripe for products, prices, and checkout links • Express dev server for local catalog console • Playwright and Astro check for CI quality gates

What The App Does

The public site lets shoppers: • Browse a small, highly-curated catalog rendered statically at build time. • Toggle themes, color palettes, and font packs via a React command palette. • Search content instantly through Pagefind-generated static search indexes. • Purchase items through Stripe-hosted checkout sessions—no custom backend needed in production.

Operators (i.e., me) run scripts such as pnpm sync:stripe to pull products/prices from Stripe into JSON manifests, or push local catalog changes back to Stripe. A lightweight Express console spins up only in dev to test those flows.

Product/UX Review

The UX leans into craft rather than scale:

Positive • Instant initial paint—Astro pre-renders everything. • Theme system (dark/light + three color palettes and four font packs) gives the shop a branded, playful feel without page reloads. • Sub-100 KB of JS for the average page; React is used only for interactive islands like the command palette and cart badge. • Lucide icons, subtle WebGL shader backgrounds (tested with Playwright to avoid GPU regressions), and fine-tuned typography elevate perceived quality.

Limitations • No account system, order history, or cart persistence beyond localStorage; the store is ideal for one-off sales, not repeat customers. • Catalog edits require a developer to run scripts—there’s no merchant-friendly admin UI. • The heavy focus on theming and shaders adds build complexity with minimal commercial upside.

Technical Architecture

1. Build-time • Astro compiles .astro pages to static HTML; React components become islands. • pagefind CLI generates a client-side WASM search index. • Tailwind CSS is processed with PostCSS and autoprefixer; colors reference CSS custom properties for runtime theme switching.

2. Catalog management • Stripe is the single source of truth. • Scripts in scripts/ call the Stripe API via the natural_stripe helper to: – Fetch products/prices → .catalog-dev/*.json – Validate invariants (stripe:selfcheck, stripe:hygiene) – Push staged changes to live (stripe:push:prod)

3. Development server • server.js mounts an Express app that, in dev mode, hosts a catalog console with IP whitelisting. • CORS and Busboy are configured for any multipart payloads, though none ship to prod.

4. CI/CD • pnpm check runs Playwright shader tests, Node test suites, and astro check. • A custom Bash deploy script (scripts/ngdeploy-*) publishes the static site to Netlify.

AI Techniques And Patterns

The shipped storefront has no runtime AI features. The repo does include internal LLM prompt contracts (AGENTS.md, CATALOG_AGENT_INSTRUCTIONS.md) intended for future developer tooling. These are not part of the production build and therefore do not affect the user experience or architecture.

What Was Learned

• Astro’s “static-first, islands-only where needed” model keeps bundles lean without fighting React. • Treating Stripe as the database but keeping change control in Git provides auditability at the cost of non-technical operator friction. • Playwright GPU tests caught WebGL regressions that slipped through manual QA—automated visual simulations are worth the time. • Tailwind’s CSS-variable strategy for theming scales better than maintaining parallel class trees. • Static search (Pagefind) is viable for small catalogs; once SKUs grow into the hundreds, incremental indexing or a hosted search may be required.

Strengths And Tradeoffs

Strengths • Blazing-fast static delivery and SEO. • Minimal runtime infrastructure—only Stripe checkout needs to stay up. • Highly polished visual design with configurable themes. • Strong code quality gates (typecheck, tests, formatting) baked into scripts.

Tradeoffs • Catalog admin requires Git + terminal knowledge; non-dev colleagues cannot self-serve. • No scalability path for complex commerce features (inventory, shipping rates, B2B pricing). • Additional shader and theming code adds maintenance overhead for aesthetics alone. • Express code never runs in production, yet increases attack surface if mis-configured during preview deployments.

Overall, “My Store” demonstrates how far a static-site approach can go when paired with Stripe, while highlighting the operational limits of developer-centric tooling once business complexity rises.