it-f-store

A Next.js e-commerce storefront that reads products, prices, and inventory straight from Stripe.

Overview

it-f-store (IT-F Store, based on the "Your Next Store" framework) is a Stripe-driven e-commerce storefront: products, prices, descriptions, and categories all live in the Stripe Dashboard rather than a separate CMS or database table. It supports simple product variants (e.g. sizes), Stripe Webhooks for cart revalidation, and a preview of Stripe Tax. It's aimed at shoppers buying products from this store and at whoever manages the catalog via Stripe.

Products are managed entirely in Stripe (Dashboard → Product catalogue), using product metadata fields (slug, category, order, variant) — there is no separate admin UI for products yet.

Stack

Next.js (Turbopack for both dev and build)
Stripe (@stripe/stripe-js, @stripe/react-stripe-js, stripe) for catalog, checkout, and webhooks
@repo/commerce, @repo/auth, @repo/auth-ui, @repo/db (Drizzle), @repo/analytics, @repo/observability, @repo/design-system — shared monorepo packages
Better Auth for authentication
next-intl for internationalization
Vitest (unit) + Playwright (E2E, accessibility, Lighthouse CI) + Storybook

Develop

pnpm -F @repo/it-f-store dev            # http://localhost:3000
pnpm -F @repo/it-f-store build          # production build (Turbopack)
pnpm -F @repo/it-f-store start          # run the production build
pnpm -F @repo/it-f-store lint           # oxlint src/
pnpm -F @repo/it-f-store check-types    # tsc --noEmit
pnpm -F @repo/it-f-store storybook      # Storybook dev server on :6006

Requires a .env (copy .env.example) with Stripe keys (NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_SECRET_KEY, STRIPE_CURRENCY) at minimum; see the app README for the full list of required/optional environment variables.

Test

pnpm -F @repo/it-f-store test           # vitest
pnpm -F @repo/it-f-store test:coverage  # vitest --coverage
pnpm -F @repo/it-f-store test:e2e       # playwright (runs on :3001)
pnpm -F @repo/it-f-store test:a11y      # playwright accessibility project
pnpm -F @repo/it-f-store test:lhci      # Lighthouse CI

Build & deploy

Build with pnpm -F @repo/it-f-store build. This monorepo's instance is deployed on Vercel (albertonline-org-it-f-store) at it-f-store.albertonline.org. Vercel deploys require ENABLE_EXPERIMENTAL_COREPACK=1.

Structure

src/ — Next.js app (App Router pages, components, providers)
src/providers/AnalyticsProvider.tsx — PostHog init, gated on cookie-consent
tests/e2e/ — Playwright E2E and accessibility specs
codegen.ts — GraphQL Codegen config

See the apps overview and the monorepo overview.