Flatey Pizza Iceland



Overview
Flatey Pizza Iceland is the customer-facing ordering and marketing website for Flatey Pizza, an Icelandic pizza chain. Visitors can order pizzas for immediate or scheduled delivery, buy gift cards, browse the catering menu, and read the "pizza of the month" articles — in Icelandic or English.
Following the standard VISKA customer pattern, Prismic manages all marketing content, catering pages, and articles, while the product catalog, cart, and checkout come from the shared Upsell platform via @upsell/kit and the public-api.upsell.is/v2 API. There is no local database; SWR handles client-side data fetching.
Tech Stack & Rationale
Layer | Technology | Why |
|---|---|---|
Framework | Next.js 14 (App Router), React 18 | Server-first rendering with locale route groups and article routes |
Language | TypeScript | Strict typing across slices, kit types, and API responses |
Styling | Tailwind CSS 3.4 | Brand styling with custom components in core/ |
CMS | Prismic + Slice Machine | Content editors manage pages, catering, and articles |
Client data fetching | SWR 2.2 | Revalidation for cart, scheduled-order, and gift-card state |
Business logic | @upsell/kit + public-api.upsell.is/v2 (Axios) | Shared cart/checkout plus scheduled orders and gift cards |
Scheduling | date-fns + date-fns-tz | Iceland-timezone scheduled-order dates and opening hours |
i18n | LinguiJS (is, en) + Crowdin | Compile-time catalogs, Icelandic-first locale redirect |
Animation | GSAP, Framer Motion, Swiper | Hero motion, marquee, and carousels |
Monitoring | Sentry | Production error tracking |
Hosting | Cloudflare Workers via OpenNext (migrated from Vercel) | Edge deployment of the standalone build |
Architecture
A request is locale-normalized by middleware, server-rendered from Prismic content (including the article type), then enriched client-side with catalog and scheduling data. The core/ folder holds the Prismic fetchers and shared utilities that the older lib/ folder used elsewhere in the monorepo.
The flow runs: Browser request (/is/…) → middleware.ts (locale redirect → is) → Server Components (pages + article[uid]) → SWR hooks (scheduled orders) → public-api (upsell.is/v2) → Cloudflare (Workers edge); Browser request (/is/…) → middleware.ts (locale redirect → is) → core/prismic (fetcher + tag cache) → @upsell/kit (cart · checkout).
- Locale routing — middleware.ts redirects locale-less requests to /is/... and sets a locale header, exempting /api/ and /.well-known.
- Server rendering — (main) pages are React Server Components that fetch Prismic pages documents through the core/prismic/fetcher.ts client; (prismic)/article/[uid] renders the pizza-of-the-month articles with related-article queries.
- Scheduling — client components use SWR plus date-fns/date-fns-tz to offer scheduled delivery times in the Iceland timezone, translating weekdays and months to Icelandic and grouping business hours across branches.
- Checkout & gift cards — the (clean) checkout route group handles shipping, summary, and verification, while giftcards/ and giftcards/[giftcardID] manage gift-card purchasing; a checkout/upsell page offers post-order add-ons.
- Edge serving — the standalone build runs on Cloudflare Workers via OpenNext, with next/image in unoptimized mode (after migrating off a custom Cloudflare image loader) and Sentry active in production.
Folder Structure
customers/flatey-web/
├── app/
│ ├── [locale]/
│ │ ├── (main)/
│ │ │ ├── (customization)/ # products/[productID], deals/[dealID], giftcards/[giftcardID]
│ │ │ ├── giftcards/ · store/ · profile/ · login/ · checkout/upsell/
│ │ ├── (clean)/checkout/ # shipping · summary · verification
│ │ ├── (clean)/orders/[orderID]/ # post-order status
│ │ └── (prismic)/ # [[...slug]] + article/[uid] + slice-simulator
│ ├── api/ # preview, revalidate
│ └── sitemap.ts · robots.ts · manifest.ts
├── components/ # auth, cart, checkout, giftcard, product, store…
├── slices/ # 17 slices (Hero, CateringMenu, StoreLocations, …)
├── customtypes/ # pages, layouts, top_banner, article
├── core/ # prismic/fetcher.ts, lib/api.ts, utils/, types/
├── constants/ # products, order, branches
├── locales/translations/ # en.po, is.po (Crowdin)
└── middleware.ts · appRouterI18n.ts · prismicio.tsContent Model
Prismic is the sole content source. Four custom types drive the site:
Custom type | Kind | Purpose |
|---|---|---|
pages | Repeatable | Marketing pages — uid, page_title, a layout link, a slice zone, and SEO metadata |
layouts | Repeatable | Site chrome composed of navbar, children, and footer slices; linked from each pages document |
top_banner | Singleton | An optional promo bar (paragraph, cta_text, cta_url, active) surfaced by useTopBanner |
article | Repeatable | Pizza-of-the-month posts — title, tags (none / pizza-of-the-month), publish_date, thumbnail, description, paragraph, and SEO metadata |
The pages slice zone exposes 16 slices, including hero, featured_banner, featured_products, menu, store_locations, split_view, description_grid, accordion_list, article, and the catering set (catering_hero, catering_infogram, catering_menu, catering_form).
Impact & Results
- In production for the Flatey Pizza chain in Iceland, with scheduled delivery, gift cards, and pizza-of-the-month articles.
- One of 16+ customer sites served by the shared VISKA monorepo platform.
My Contributions
Worked on the Flatey Pizza site as part of the VISKA monorepo team:
- Built the scheduled-order functionality, translating weekdays and months to Icelandic and handling edge cases across branches and opening hours.
- Migrated the deployment from Vercel to Cloudflare Workers via OpenNext and fixed cart crashes and image-loader issues during the migration.
- Added the gift-card flow (giftcards and giftcards/[giftcardID]) and the post-order checkout/upsell page.
- Built the pizza-of-the-month article feed (article custom type and article/[uid] route) with related-article queries.
- Fixed the deals-page application error and removed redundant image unoptimized props.
References
[1] Flatey Pizza, "Flatey Pizza Iceland," flateypizza.is, 2025. [Online]. Available: https://flateypizza.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
Comments
Leave a Comment
You must be signed in to comment
0 Comments
No comments yet. Be the first to comment!