Next.js fullstack storefront

Modern commerce storefront on React, Next.js App Router, TypeScript, GraphQL, and Tailwind CSS. The application is built as a production shop: international routing, a server-first cart, and a multi-step checkout that shares session state with the catalog.

Overview

This repository is the fullstack web product in the antonkarasbiz portfolio. Catalog, pricing, and translations are driven by a headless GraphQL commerce API (Saleor-compatible). The storefront owns UX, locale/channel URLs, and checkout orchestration.

Capabilities

• App Router storefront with TypeScript and Tailwind CSS
• Locale + channel URLs (/{locale}/{channel}/…)
• Translated catalog slugs and hreflang metadata
• Server-first cart and checkout (RSC + server actions)
• URL-driven checkout steps: contact, shipping, payment
• Shared BFF session for guests and signed-in customers
• Extensible payment registry (Stripe and dummy gateways)
• Partial prerendering on product pages
• Multi-attribute variant selection and channel pricing
• Accessibility-focused product and checkout flows

Architecture

Browser
  └── Next.js App Router
        ├── Catalog / PDP / CMS   → GraphQL commerce API
        ├── Cart cookie + mutations
        └── Checkout RSC + BFF session
              └── Payment gateways

Developer notes:

• Surfaces: skills/saleor-paper-storefront/rules/paper-surfaces.md
• Checkout: skills/saleor-paper-storefront/rules/checkout-management.md
• i18n: docs/international-storefront.md

Environment

Required values include the GraphQL endpoint, default channel, and locale list. See the project env documentation before npm run dev. Do not commit tokens.

npm install
npm run dev

License

See the repository license. The storefront architecture follows the Saleor Paper template. Upstream terms and attribution remain in source headers where present.

Maintainer

Anton Karas — full-stack, blockchain, and AI engineering.