The client
Electonyx is a Sri Lankan electronics-education brand selling Arduino & ESP32 learning kits to students, hobbyists, and the parents buying for them. Every kit ships with a complete component list, printed labelling, and a lifetime link to a shared Google Drive tutorial library · every video recorded three times in English, Tamil, and Sinhala so learning never stalls on language.
The founder's thesis: if you can follow a tutorial, you can build real electronics · you don't need an engineering background, you just need the right kit and a good guide. What was missing in the SL market was a kit designed locally · with local pricing, local languages, and an ordering flow that runs on WhatsApp because that's where SL SMBs actually talk to customers.
Why Astro (and not Shopify)
A storefront for three fixed kit tiers + a tutorial library + a configurator doesn't need a full Shopify stack. It needs to be fast on a student's phone on 4G in Kandy, render properly on the 12-year-old laptops that schools buy, and cost nothing in monthly SaaS fees that erode a single-unit margin.
Astro was the right fit:
- Static-by-default rendering for the marketing pages (home, kit detail, learning hub, about) · ~20 KB of JS on first load, not 500 KB
- Server-rendered checkout via Astro's hybrid adapter, talking directly to a Notion-backed orders database and the WhatsApp Business API · no Shopify, no middleman cut on every sale
- MDX-driven content for the tutorial index · the founder adds a new project with a Markdown file, not a CMS ticket
- Zero vendor lock-in · the whole store runs on a $6/mo VPS, not a $29/mo Shopify Basic plan that caps features
The trade-off: we built cart / inventory / checkout ourselves rather than turning Shopify plugins on. Worth it at this scale because the product catalog is small, stable, and won't grow past ~10 SKUs in any given season.
What we built
- Custom dark-themed storefront · near-black canvas, safety-orange accent, component photography that treats microcontrollers like jewelry. Written in Astro with minimal React islands only where interactivity was essential.
- Three kit tiers with full detail pages · Beginner (first LED → 8 Arduino projects), Intermediate (ESP32, WiFi-controlled cars, autonomous robots), and Advanced (AI + computer vision: hand-gesture controls, face detection, AI mouse).
- Custom kit configurator at
/customize· swap components in and out of a base kit, see the price update live, generate a WhatsApp message with the configured spec pre-filled. No "add to cart" button that leads nowhere · the configurator hands the order straight to a human who confirms stock and ships it. - Tutorial library integration · each kit page links to the shared Google Drive directory for that tier. Access is lifetime, no login, no DRM · just a link that works on any device the kit owner uses now or later.
- Trilingual content surfaces · English/Tamil/Sinhala switch on every page where tutorials are referenced. The testimonials section deliberately includes a Sinhala quote untranslated · students see someone like them, parents recognise the voice.
- WhatsApp-first order path · every CTA has a "Chat on WhatsApp" sibling. Shoppers who prefer the messaging flow get the founder in their DMs; shoppers who prefer web-checkout get the /customize path.
- Core Web Vitals tuned · Lighthouse 98+ on mobile · the kit photography is lazily loaded + served as AVIF with WebP fallback, the React islands are behind
client:visibleso they only hydrate when scrolled into view.
What we kept out
Honest scope · we built the storefront and the configurator. We did not write the tutorial content (the founder records every video personally), we did not source the components (that's the founder's existing supply chain), and we did not build a full LMS with per-student progress tracking (deliberately · the Google Drive link model is faster to ship and friction-free for students).
Analytics, product photography sessions, and ongoing feature work sit on an optional retainer.
Why it's on the portfolio
Electonyx is the case that sums up what we argue for on most discovery calls · the right stack, the right scope, the right voice for the audience, shipped without the template bloat that would have made the same site 8x slower and 3x the monthly cost. A small team built something real founders can recognise themselves in · custom where custom earns its keep, boring where boring is faster.
