Castello Is

Overview

Castello Is is the customer-facing ordering and marketing website for Castello, an Italian restaurant group with branches in Reykjavik (Laugavegur and Storhothi). The site lets visitors browse pizzas, kebab, and offers, customise a pizza down to a half-and-half split, check the allergen breakdown of every item, and place an order for pickup or delivery in Icelandic or English.

As with the other VISKA customer sites, Prismic owns the marketing content and the menu, while the product catalog, pricing, cart, and checkout are driven by the shared Upsell platform through the @upsell/kit library and the public-api.upsell.is/v2 API. There is no local database — Prismic is the content source and SWR (via the kit) 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) → Vercel (edge / CDN); 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, pizza customizer, allergen table) 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. Larger orders — the staerri-pantanir route handles catering-style bulk orders, and the /offers, /pizzas, and /kebab URLs redirect into anchored menu sections.

Folder Structure

customers/castello-web/
├── app/[locale]/
│   ├── (main)/
│   │   ├── (customization)/          # products/[productID], deals/[dealID]
│   │   ├── staerri-pantanir/         # larger/catering orders
│   │   ├── store/ · login/ · profile/
│   ├── (clean)/checkout/             # shipping · summary · verification
│   ├── (prismic)/[[...slug]]/        # CMS-driven pages + slice-simulator
│   └── layout.tsx
├── components/                       # auth, cart, checkout, deal, input, product, profile, store…
├── slices/                           # 14 slices (Hero, Menu, AllergensTable, StoreLocations, …)
├── customtypes/                      # pages, layouts, top_banner
├── constants/                        # branches, order, products
├── lib/                              # prismic.ts, api.ts, generateMetaData.ts, linkResolver.ts, hooks/
├── locales/translations/             # en.po, is.po (Crowdin)
├── middleware.ts · appRouterI18n.ts · prismicio.ts
└── next.config.js · tailwind.config.ts

Content Model

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

The pages slice zone exposes 11 slices: hero, menu, featured_products, category_shortcut, allergens_table, store_locations, text_image_banner, paragraph, and the form slices contact_form, career_form, and catering_form.

Impact & Results

• In production for the Castello restaurant group in Reykjavik, with half-and-half pizza customization and bilingual ordering.
• One of 16+ customer sites served by the shared VISKA monorepo platform.

My Contributions

Worked on the Castello site as part of the VISKA monorepo team:

• Built the half-and-half pizza customization flow so a pizza can be split between two toppings.
• Added the allergen page and its Prismic content (allergen table slice and page wiring).
• Added the paragraph/contact slice and iterated on the main menu UI.
• Improved responsiveness and loading states, including skeleton loaders for the menu.
• Fixed a variation-selection bug and synced Icelandic and English Crowdin translations.

References

[1] Castello, "Castello — Pizzeria," castello.is, 2025. [Online]. Available: https://castello.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