Wok To Walk Iceland

Overview

Wok To Walk Iceland is the customer-facing ordering and marketing website for the Icelandic franchise of Wok To Walk, the international wok-to-order chain. The site lets visitors browse the menu, build their own wok from base, protein, vegetables, and sauce, check the nutritional breakdown of every combination, and place an order for pickup or delivery — all in Icelandic or English.

As with every VISKA customer site, this is a marketing/ordering shell: Prismic manages all marketing content and the menu, while the product catalog, pricing, cart, and checkout are driven by the shared Upsell platform via @upsell/kit and the public-api.upsell.is/v2 API. There is no local database — Prismic is the content source and SWR handles client-side data fetching.

Tech Stack & Rationale

Architecture

A request flows from the locale middleware through server-rendered pages, then hands off to SWR-backed client components that talk to the Upsell API. Prismic content is fetched server-side with tag-based caching and preview support.

The flow runs: Browser request (/is/menu) → middleware.ts (locale redirect → is) → Server Components (RSC + generateMetadata) → SWR hooks (client revalidation) → public-api (upsell.is/v2) → Cloudflare (Workers edge); Browser request (/is/menu) → middleware.ts (locale redirect → is) → Prismic client (tag cache + preview) → @upsell/kit (cart · checkout).

1. Locale routing — middleware.ts reads the request pathname and, when no locale prefix is present, redirects to /is/... (Icelandic default). API and well-known paths are exempt.
2. Server rendering — (main) pages are React Server Components that fetch Prismic pages documents (with their linked layouts document) through a tag-cached client, then render the slice zone.
3. Client interactivity — interactive features (cart, customizer, checkout) hydrate into client components that read the product catalog through @upsell/kit, with SWR managing revalidation and optimistic cart state.
4. Checkout — the (clean) route group renders checkout steps (shipping, summary, verification) without the site chrome; payment goes through the Upsell API with Apple Pay support via the useApplePay hook and OTP verification via react18-input-otp.
5. Edge serving — the standalone Next.js build is deployed to Cloudflare Workers through OpenNext, with next/image in unoptimized mode and Sentry wired in production.

Folder Structure

customers/wok-to-walk-web/
├── app/
│   ├── [locale]/
│   │   ├── (main)/                  # public pages with navbar + footer
│   │   │   ├── (customization)/     # build-your-own-wok: products/[productID], deals/[dealID]
│   │   │   ├── nutrition-calculator/# per-ingredient nutrition totals
│   │   │   ├── store/               # store locator (Mapbox)
│   │   │   └── profile/             # orders, edit profile
│   │   ├── (clean)/checkout/        # shipping · summary · verification
│   │   ├── (plain)/                 # login, checkout/success
│   │   └── (prismic)/[[...slug]]/   # CMS-driven pages + slice-simulator
│   ├── api/                         # preview, exit-preview, revalidate
│   └── sitemap.ts · robots.ts · manifest.ts
├── components/                      # auth, cart, calculator, checkout, menu, product, store…
├── slices/                          # 18 slices (Hero, Menu, CustomWok, PopularWok, …)
├── customtypes/                     # pages, layouts, top_banner, nutrition_information
├── constants/                       # products, order, shipping, franchises
├── lib/                             # prismic.ts, api.ts, generateMetaData.ts, hooks/
├── locales/translations/            # en.po, is.po (Crowdin)
├── middleware.ts · appRouterI18n.ts · prismicio.ts
└── next.config.js · tailwind.config.ts · wrangler.toml

Content Model

Prismic is the single content source. Four custom types drive the site:

The pages slice zone exposes 14 slices, notably custom_wok (build-your-own-wok builder), popular_wok, menu, nutrition-adjacent description_grid, take_me_there (Mapbox locator), gallery, and form slices (career_form, company_account_form, contact).

Impact & Results

• In production for the Wok To Walk franchise in Iceland (pickup/delivery ordering, Icelandic and English).
• One of 16+ customer sites served by the shared VISKA monorepo platform.

My Contributions

Worked on the Wok To Walk site as part of the VISKA monorepo team:

• Migrated the deployment from Vercel to Cloudflare Workers via OpenNext.
• Built the build-your-own-wok customizer and the nutrition calculator experience against the nutrition_information content type.
• Refactored the pricing section to the granular pricing structure and migrated it to the usePriceSummaryV2 pricing API.
• Improved Icelandic translations across the storefront and checkout.
• Fixed the Apple Pay loading screen, the shipping-page crash, and the empty-cart redirect on checkout summary pages.
• Added the Wok To Walk "Darts" QR flow and updated the ordering hostname to skor.woktokwalk.is.

References

[1] Wok To Walk Iceland, "Wok To Walk — Iceland," woktowalk.is, 2024. [Online]. Available: https://woktowalk.is/is/

[2] Vercel, "Next.js Documentation," nextjs.org. [Online]. Available: https://nextjs.org/docs

[3] Prismic, "Prismic Documentation," prismic.io. [Online]. Available: https://prismic.io/docs

[4] Vercel, "SWR — React Hooks for Data Fetching," swr.vercel.app. [Online]. Available: https://swr.vercel.app

[5] LinguiJS, "LinguiJS — Internationalization," lingui.dev. [Online]. Available: https://lingui.dev