A 2-3 minute walkthrough of RollON's storefront, admin dashboard, and config-driven architecture. Video recording pending — script ready in demo-scripts/rollon-demo-script.md
Config-driven branding: One file controls entire business identity — rebrand in under an hour. Zustand state: Minimal, serializable cart/auth/UI state with no prop drilling. WCAG 2.1 AA from day one: Keyboard-first, focus management, color contrast enforced in CI. CSP-hardened: Security headers + env validation, no hardcoded secrets.
01 The challenge
E-commerce portfolios are usually either toy apps or monolithic messes. I wanted a middle path: a real transactional storefront that's also clean enough to rebrand and ship for a client in days.
The hard parts weren't the UI — they were the seams: cart persistence across reloads, variant selection without state explosion, checkout validation that doesn't block legitimate users, and an admin dashboard that's actually useful instead of a CRUD toy.
02 Config-driven architecture
One file controls the entire business identity. Change the config, and the storefront updates everywhere — no component hunting, no magic strings.
- Single source of truth — src/lib/config.ts defines business name, tagline, colors, contact, and feature flags.
- Zero runtime overhead — config is compiled into the bundle; no API calls, no fetch-on-load.
- Type-safe branding — TypeScript enforces that every brand touchpoint has a config value.
- Deploy targets — Vercel preview + production, with environment-specific config injection.
Most e-commerce templates hardcode business logic. RollON's config-driven approach means a developer can rebrand the entire storefront in under an hour without touching UI components.
03 Testing strategy
117 tests across two layers: fast unit tests for logic, slower E2E tests for critical flows. Both enforced in CI.
| Signal | Result |
|---|---|
| Unit tests | 106 (Vitest) |
| E2E tests | 11 (Playwright) |
| Coverage | 87% |
| CI | GitHub Actions green |
| Accessibility | WCAG 2.1 AA |
| CSP | Hardened headers |
Unit tests cover cart logic, checkout validation, and product filtering. Playwright covers the full user journey: browse → cart → checkout → confirmation.
04 State management
Zustand keeps cart, auth, and UI state minimal and serializable. No prop drilling, no context soup.
- Cart store — persistent via localStorage, survives reloads and tab closes.
- Auth store — lightweight wrapper around Firebase Auth with type-safe user state.
- UI store — modals, toasts, mobile nav, and theme preference in one place.
- Devtools — Zustand devtools enabled in development for time-travel debugging.
05 Accessibility as a feature
WCAG 2.1 AA isn't a checklist — it's how we build. Keyboard navigation, ARIA labels, focus management, and color contrast are enforced from the first component.
- Keyboard-first — all interactive elements reachable and operable via keyboard.
- Focus management — modals trap focus, dropdowns return focus on close.
- Color contrast — all text meets AA contrast ratios against backgrounds.
- Screen reader support — ARIA labels and live regions for dynamic updates.
Automated a11y tests run in CI, but manual screen-reader testing with real users remains on the roadmap. Automated tooling catches ~70% of issues; the rest need human verification.
06 Architecture & deployment
- Frontend — React 19, TypeScript strict mode, Tailwind CSS 4, Vite.
- State — Zustand for cart, auth, and UI state.
- Routing — React Router with protected admin routes.
- Deploy — Vercel preview + production, GitHub Actions CI.
- Security — CSP headers, env validation, no hardcoded secrets.
- Config-driven — Centralized config for branding, features, and deployment targets.
Tailwind CSS 4
React Router
Cart / Auth / UI
Config Layer
GitHub Actions CI
CSP + Env Validation
RollON architecture: frontend → state → deploy
07 What I'd do differently
Every project teaches. Here's what I'd change if I started tomorrow:
- Checkout state machine — Replace ad-hoc validation with XState for clearer flow control and easier testing.
- React Server Components — Move product listing and checkout summary to RSC for faster initial load.
- Edge caching — Deploy to edge runtime with stale-while-revalidate for product catalog.
- Visual regression testing — Add Chromatic or Playwright visual tests to catch UI regressions.
- Performance budgets — Enforce bundle size limits in CI to prevent feature creep.