market-web

Next.js App Router storefront for browsing TV content (movies, series, episodes, sport, stores) backed by a Telia GraphQL API.

Overview

market-web is a pixel-perfect port of Telia's tv.market-web storefront (originally Pages Router + Emotion) into this monorepo's App Router setup. It renders content pages and panels — showcases, poster lists, single features — fetched from a remote GraphQL endpoint, with localized copy and Emotion-styled components. See PORTING.md in the app for the porting recipe and conventions.

Stack

Next.js (App Router) + React 19, built with Turbopack
Emotion (@emotion/react, styled) for styling; Tailwind via PostCSS
GraphQL over graphql-tag documents; types committed in src/graphql/generated.ts (no codegen at build time — types are checked in)
Effect for the server data layer (ManagedRuntime, services); client data via @repo/react-effect + @tanstack/react-query
@repo/design-system for shared UI; @repo/next-config for base config
@t3-oss/env-nextjs + Effect Schema for env validation
framer-motion, blurhash/react-blurhash, date-fns
Observability: @repo/observability (Sentry), @repo/analytics (PostHog + Vercel Analytics), @repo/telemetry (Effect OTLP + Prometheus)

Develop

pnpm -F market-web dev    # next dev --turbopack on http://localhost:3005

NEXT_PUBLIC_BASE_URL and NEXT_PUBLIC_ENVIRONMENT (PILOT | PROD) select the upstream GraphQL endpoint — see env.ts.

Test

pnpm -F market-web test            # vitest --passWithNoTests
pnpm -F market-web test:ui         # vitest --ui
pnpm -F market-web test:coverage   # vitest --coverage --passWithNoTests
pnpm -F market-web test:e2e        # playwright test
pnpm -F market-web check-types     # tsc --noEmit --incremental
pnpm -F market-web lint            # oxlint src/

Build & deploy

pnpm -F market-web build    # next build --turbopack
pnpm -F market-web start    # next start

Deployed on Vercel (albertonline-org-market-web) at market-web.albertonline.org. Production deploys trigger on push to main via the Vercel Git integration.

Structure

src/app/ — App Router routes ((site) group: home, movie, series, episode, sportEvent, store, panel, dynamic [page]), layout, error, sitemap, robots
src/views/ — page-level view components per content type
src/components/ — ported leaf and composite UI components
src/graphql/ — generated.ts types + hand-written queries/ and fragments/
src/services/ — Effect data layer (MarketDataService, runtime, GraphQL client)
src/providers/, src/hooks/, src/lib/, src/styles/ — shared app wiring, hooks, utilities, Emotion tokens
src/i18n/ — translate.ts + locale JSON (sv.json)

See the apps overview and the monorepo overview.