juicy-shop

An intentionally vulnerable OWASP Juice-Shop style e-commerce app for learning and practicing web security exploits.

Overview

Juicy Shop is a security-challenge training app in the OWASP Juice-Shop style — a deliberately insecure shop where each baked-in vulnerability is a challenge to find and exploit. It's for anyone learning or teaching web security: the product catalogue and challenge definitions are static data, and everything a player does (identity/profile, cart, reviews, challenge progress) lives entirely in the browser. There is no server database in the request path, so it deploys to any serverless host.

The SQL-injection challenge is authentic: the product search runs a real in-browser SQLite engine (sql.js), so ' OR '1'='1' -- genuinely exfiltrates the hidden confidential product.

Stack

Next.js (App Router) on React 19, Turbopack
@repo/local-db (TanStack DB) — local-first profile, cart, reviews, progress
sql.js (in-browser SQLite, asm.js) — the SQL-injection lab
@repo/juice-domain (challenge keys + detector types), @repo/juice-services (static catalogue, challenge docs, lessons)
@repo/design-system, Tailwind CSS, @repo/form-builder, react-hook-form
@repo/internationalization (i18n), lucide-react, zod
Read-only MCP server (Streamable HTTP, JSON-RPC) at /mcp, over the static catalogue

Develop

pnpm -F juicy-shop dev      # next dev --turbopack on http://localhost:3002

Test

pnpm -F juicy-shop test           # vitest (unit/component)
pnpm -F juicy-shop test:ui        # vitest UI
pnpm -F juicy-shop test:coverage  # vitest + v8 coverage
pnpm -F juicy-shop test:e2e       # playwright (incl. cart sandbox flow)
pnpm -F juicy-shop test:a11y      # playwright axe-core accessibility scan
pnpm -F juicy-shop test:lhci      # Lighthouse CI

Build & deploy

pnpm -F juicy-shop build   # next build --turbopack
pnpm -F juicy-shop start   # next start

Deployed on Vercel (albertonline-org-juicy-shop) at juicy-shop.albertonline.org.

Structure

src/
├── app/                # App Router: (auth), (shop), api/, mcp/
├── components/         # app shell, layout, products, form-builder
├── server/             # actions, auth, domain, effect, repos, services, migrations
├── security-examples/  # intentionally vulnerable code shown in challenges
├── i18n/               # translations
└── lib/                # env, challenges/, sqli/
tests/e2e/               # playwright e2e + accessibility specs

See the apps overview and the monorepo overview.