Risto Innovates — Ecommerce & Brand Identity

11/4/2025

Risto Innovates — Ecommerce & Brand Identity

Overview

Risto Innovates designs and builds Arduino‑powered MIDI controllers on YouTube. We delivered a purpose‑built ecommerce experience and brand identity that reflects the craft and engineering behind each product. The result: a high‑trust storefront with clean product storytelling, fast navigation, and a smooth checkout.

Risto Innovates — Homepage

Goals & Outcomes

  • Launch a premium, credible store that converts engaged viewers into customers
  • Communicate the DIY/engineering ethos without sacrificing polish and clarity
  • Provide an admin suite to manage catalog, content, and orders without friction

Brand & Visual Language

  • Color: calm neutrals with a primary red/coral accent and a soft secondary used in gradients and calls to action
  • Typography: Poppins for a modern, maker‑friendly tone; legible body for specs and documentation
  • Components: product cards, spec tables, comparison blocks, and code‑adjacent visuals; subtle grid backgrounds and radial red accents consistent with hero

Brand keywords: precise, inventive, pragmatic, maker‑friendly.

Information Architecture

  • Storefront: Home, Shop, Product, Cart, Checkout, Account (Orders, Addresses, Downloads)
  • Content: Blog and long‑form posts for build logs, tutorials, and updates
  • Policy pages (Privacy, Terms, Returns) with readable typography

Design System

  • Tokens for spacing, radii, color, elevation, and focus states
  • Product UI: gallery with zoom, tags, badges (in‑stock, limited series), spec lists
  • Reusable building blocks: CTA bars, FAQs, accordions, input controls, toasts

Interaction & Motion

Subtle scroll reveals and anchor transitions guide attention without distracting from product exploration. Hover states and toasts (e.g., add‑to‑cart) reinforce feedback. All interactions respect reduced motion.

Implementation

  • Monorepo with three apps:
    • Storefront (client/): React + Vite, Tailwind, react‑router
    • Admin (admin/): React + Vite admin dashboard for products, orders, content
    • API (server/): Node + Express + MongoDB (Mongoose)
  • Commerce:
    • Products, variants, inventory, reviews
    • Cart, coupon codes, shipping classes
    • Checkout via Stripe (@stripe/react-stripe-js)
  • Accounts: JWT auth, order history, downloads, addresses
  • SEO: automated sitemap/robots/feeds and per‑page meta; consent banner
  • Analytics: GTM pageview hook, event mapping for key funnels
  • SEO endpoints: /api/seo/robots.txt and /api/seo/sitemap.xml generated from server BASE_URL
  • YouTube feed ingest: /api/feeds/youtube fetches channel videos for the site (capped to latest 6)
  • Analytics & Consent: GTM pageview hook and a granular cookie consent banner that updates gtag('consent','update', …)
Frontend: React 19, Vite 5/7, Tailwind, React Router
Backend: Node 18+, Express 5, MongoDB (Mongoose 8)
Payments: Stripe Elements
Ops: rate limiting, helmet, compression, morgan, Nodemailer

Product detail — spec‑first layout

Performance & SEO

  • Fast static build and code‑splitting; responsive media
  • sitemap.xml and robots.txt generated at build; canonical URLs
  • JSON‑LD for Organization, Product, and BlogPosting; OpenGraph/Twitter images
  • SEO controls in Admin for each product and blog post (titles, descriptions, canonical, social images)

Benchmarks (sample on laptop):

  • Overall SEO grade: A (100%)
  • LCP: 0.29s · CLS: 0.2 · INP: 22ms
  • Lighthouse (Home): Performance 98 / A11y 100 / Best‑Practices 100 / SEO 100
  • First Contentful Paint ~0.9s, TTI ~1.3s (warm cache)

Checkout — streamlined Stripe flow

Case Study Narrative (to be expanded)

This section will be expanded from the Risto Innovates project repository to cover discovery, design exploration, component library, implementation details, and measurable outcomes.

Discovery & Strategy

– To be populated from @ristoinnovates brief and notes.

Branding & Identity

– Logo system, color calibration for electronics motif, and type pairing rationale.

Design & Components

– Layout grids, cards, CTAs, and patterns used throughout.

Build & Technology

– Project structure, key libraries (Stripe, Mongoose, GTM), rate limiting, auth, and SEO automation.

Server route surface (from server/src/routes/):

account, admin, auth, blog, cart, checkout, contact, feeds, health, newsletter, products, seo

Launch & Outcomes

– Performance metrics, SEO readiness, and content governance.

Admin & Operations

The admin dashboard streamlines catalog and content management:

  • Product CRUD with images, pricing, inventory, shipping classes
  • Orders overview with statuses and Stripe payment introspection
  • Blog authoring with drafts and scheduled posts
  • Newsletter and subscribers management

Admin dashboard — operations overview

What made it work

  • Tight brand‑to‑build loop: design tokens mapped directly into Tailwind
  • Specification‑first product pages: buyers get details without friction
  • Motion with restraint: feels premium, never “flashy”

Advanced Implementation Highlights

1) Secure server‑side pricing with shipping classes and country rules

The API validates cart lines, variants, stock, and shipping classes on the server and computes shipping by matching classes to the destination country. Coupon logic is also re‑evaluated server‑side before creating the Stripe intent.

// server/src/routes/checkout.js (excerpt)
async function validateAndPriceItems(rawItems, shippingCountryCode) {
  const items = Array.isArray(rawItems) ? rawItems : []
  const out = []
  let amount = 0
  let shippingCents = 0
  const country = String(shippingCountryCode || '').toUpperCase()
  const classCache = new Map()
  async function resolveClasses(names) {
    const want = names.filter(Boolean)
    const need = want.filter(n => !classCache.has(n))
    if (need.length) {
      const list = await ShippingClass.find({ name: { $in: need } })
      for (const sc of list) classCache.set(sc.name, sc)
    }
    return want.map(n => classCache.get(n)).filter(Boolean)
  }
  for (const it of items) {
    if (!it || !it.slug || !it.qty) continue
    const product = await Product.findOne({ slug: it.slug, status: 'active' })
    if (!product) continue
    let unit = product.price
    let stock = product.stock || 0
    let variantShippingClass = null
    let variantShippingClasses = []
    let isPhysical = (product.isPhysical != null) ? !!product.isPhysical : true
    if (it.sku && Array.isArray(product.variants)) {
      const variant = product.variants.find(v => v.sku === it.sku)
      if (variant) {
        unit = variant.price ?? unit
        stock = variant.stock ?? stock
        if (variant.shipping?.shippingClass) variantShippingClass = variant.shipping.shippingClass
        if (variant.shipping?.shippingClasses) variantShippingClasses = variant.shipping.shippingClasses
        if (variant.isPhysical != null) isPhysical = !!variant.isPhysical
      }
    }
    const qty = Math.max(1, Math.min(Number(it.qty) || 1, stock || 999))
    amount += Math.round(Number(unit) * 100) * qty
    out.push({ title: product.title, price: Number(unit), quantity: qty, slug: it.slug, sku: it.sku || null })
    if (isPhysical) {
      const classNames = variantShippingClasses?.length ? variantShippingClasses : (variantShippingClass ? [variantShippingClass] : [])
      if (classNames.length) {
        const classes = await resolveClasses(classNames)
        const matches = classes.filter(sc => {
          const list = Array.isArray(sc.countries) ? sc.countries.map(c => String(c || '').toUpperCase()) : []
          if (!list.length) return true // global
          if (!country) return false
          return list.includes(country)
        })
        if (matches.length) {
          const localMax = Math.max(...matches.map(sc => Number(sc.priceCents || 0)))
          shippingCents = Math.max(shippingCents, localMax)
        }
      }
    }
  }
  return { lineItems: out, amount, shippingCents }
}

2) Client cart sync with localStorage + server cache via custom events

The cart drawer merges an authenticated server cart with a guest local cart, updates both on changes, and broadcasts state via custom events to keep the UI in sync without prop drilling.

// client/src/components/CartDrawer.jsx (excerpt)
useEffect(() => {
  (async () => {
    const server = await loadServerCart()
    const init = server ?? loadLocalCart()
    setItems(init)
  })()
  function onAdd(e) {
    setItems(prev => {
      const next = [...prev]
      const same = it => it.slug === e.detail.slug && (it.sku||'') === (e.detail.sku||'') && (it.variantLabel||'') === (e.detail.variantLabel||'')
      const exists = next.find(same)
      if (exists) exists.qty = (exists.qty || 1) + 1
      else next.unshift({ ...e.detail, qty: 1 })
      saveLocalCart(next); saveServerCart(next)
      return next
    })
  }
  window.addEventListener('ri:add-to-cart', onAdd)
  function onCleared(){ setItems([]); saveLocalCart([]); saveServerCart([]) }
  window.addEventListener('ri:cart-cleared', onCleared)
  return () => { window.removeEventListener('ri:add-to-cart', onAdd); window.removeEventListener('ri:cart-cleared', onCleared) }
}, [])

3) Targeted auth rate‑limiting (per IP + per email)

Lightweight in‑memory limiter protects auth flows; can be swapped for Redis in multi‑process deploys.

// server/src/middleware/rateLimit.js (excerpt)
function createAuthLimiter({ windowMs = 15*60*1000, maxPerIp = 50, maxPerEmail = 5 } = {}) {
  return function authLimiter(req, res, next) {
    const ipKey = `ip:${req.ip}`
    const email = String(req.body?.email || '').trim().toLowerCase()
    const emailKey = email ? `email:${email}` : ''
    const ipRec = increment(ipKey, windowMs)
    const emailRec = emailKey ? increment(emailKey, windowMs) : null
    const ipExceeded = ipRec.count > maxPerIp
    const emailExceeded = emailRec && (emailRec.count > maxPerEmail)
    if (ipExceeded || emailExceeded) {
      const retryMs = Math.max(remainingWindowMs(ipKey, windowMs), emailKey ? remainingWindowMs(emailKey, windowMs) : 0)
      res.set('Retry-After', String(Math.ceil(retryMs/1000)))
      return res.status(429).json({ message: 'Too many attempts. Try again later.' })
    }
    next()
  }
}

4) GTM pageview hook and consent banner (analytics/marketing)

// client/src/analytics/useGtmPageview.js
export function useGtmPageview() {
  const location = useLocation();
  useEffect(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'pageview', page_path: location.pathname + location.search, page_title: document.title });
  }, [location]);
}

// client/src/components/ConsentBanner.jsx (excerpt)
function apply(consent) {
  localStorage.setItem('ri_consent', JSON.stringify(consent))
  if (window.dataLayer) window.dataLayer.push({ event: 'consent_update' })
  if (typeof window.gtag === 'function') window.gtag('consent', 'update', consent)
  setOpen(false)
}

5) Server-driven SEO and YouTube feeds

// server/src/routes/seo.js (excerpt)
router.get('/robots.txt', (req, res) => {
  res.type('text/plain').send('User-agent: *\nAllow: /\nSitemap: ' + (process.env.BASE_URL || 'http://localhost:5173') + '/api/seo/sitemap.xml')
})

// server/src/routes/feeds.js (excerpt)
router.get('/youtube', async (req, res) => {
  const channelId = process.env.YT_CHANNEL_ID || 'UC'
  const url = `https://www.youtube.com/feeds/videos.xml?channel_id=${channelId}`
  const r = await fetch(url)
  const xml = await r.text()
  // parse to latest videos...
})

Deliverables

  • Brand strategy & identity (logo, color, type)
  • Design system & component library
  • Responsive ecommerce storefront (SEO-first)
  • Animations & micro-interactions (Framer Motion)
  • Content architecture & CMS-ready structure

Links