copaia-shop

Bilingual Hebrew and English RTL-first storefront on Next.js and Payload with a mock checkout

Overview

Summary generated from the README

A Next.js 16 and Payload 3 e-commerce starter with Tailwind CSS v4 and an embedded admin panel. It ships a working storefront, cart drawer, account pages and a mock checkout, using next-intl for Hebrew and English locales. SQLite runs locally and Postgres in production. A real payment gateway must be implemented before going live.

Features

Hebrew (default) and English locales via next-intl with a full message catalog
RTL layouts built with CSS logical properties
Payload admin with Hebrew and English UI translations
Pluggable payment and email provider interfaces with mock implementations
SQLite for local development and Postgres in production via DATABASE_URI
Vercel Blob media storage enabled when a token is present

Good for

Launching a Hebrew or other RTL online shop on Next.js and Payload
Building a bilingual storefront that needs a swappable payment gateway
Learning RTL and next-intl patterns in a Payload project

From the author

Bilingual (Hebrew + English) e-commerce starter on Next.js 16, Payload CMS 3, and Tailwind v4. RTL-first.

Get started

git clone https://github.com/nirpache1989-gif/copaia-shop.git

README

copaia-shop

A bilingual (Hebrew + English) e-commerce starter on Next.js 16, Payload CMS 3, Tailwind CSS v4, and SQLite or Postgres. RTL-first.

The repo ships a working storefront, an embedded admin panel, a mock checkout flow, and a complete dual-locale message catalog. Use it as a base for a real shop, or as a reference for any Next.js + Payload project that needs RTL support.

Features

Bilingual storefront with explicit he (default, unprefixed) and en (/en/...) locales via next-intl.
True RTL: every layout uses CSS logical properties (inset-inline-*, start-* / end-*).
Payload CMS admin at /admin with Hebrew + English UI translations.
Mock checkout end-to-end. The payment provider is an interface — swap in Stripe, CardCom, or any gateway in one file.
SQLite locally (zero config). Postgres in production via DATABASE_URI.
Vercel Blob storage for media uploads, conditionally enabled when BLOB_READ_WRITE_TOKEN is present.
Cart drawer, account pages, password reset, contact form, legal markdown pages.
Single-source-of-truth brand config: name, palette, fonts, contact info live in src/brand.config.ts.
CI guard against the partial-generateStaticParams SSG pitfall (see ADR-010).

Quick start

git clone https://github.com/nirpache1989-gif/copaia-shop.git
cd copaia-shop
npm install
cp .env.example .env.local   # then set PAYLOAD_SECRET to any 16+ char string
npm run dev

Storefront: http://localhost:3000
Admin: http://localhost:3000/admin (the first visit prompts you to create an admin user, or POST /api/dev/create-admin to bootstrap one)

Stack

Layer	Choice	Notes
Framework	Next.js 16 (App Router)	Async `params`, `searchParams`, `cookies()`, `headers()`
CMS	Payload 3	Embedded into the same Next.js app
Styling	Tailwind CSS v4	CSS-first theme in `src/app/globals.css` `@theme`
Database	SQLite (dev) / Postgres (prod)	Adapter picked from `DATABASE_URI` shape
Media	Local FS (dev) / Vercel Blob (prod)	Conditional plugin in `payload.config.ts`
i18n	`next-intl`	One JSON catalog per locale in `src/messages/`
Motion	GSAP + ScrollTrigger	Hybrid with vanilla CSS variables for high-frequency FX

Project layout

.
├─ src/
│  ├─ app/
│  │  ├─ (storefront)/[locale]/    # localized public pages
│  │  ├─ (payload)/admin/          # Payload admin shell
│  │  └─ (payload)/api/            # Payload + custom API routes
│  ├─ collections/                 # Payload collections (Products, Orders, ...)
│  ├─ components/
│  │  ├─ sections/                 # storefront sections (home, etc.)
│  │  ├─ admin/payload/            # Payload custom views and chrome
│  │  └─ layout/                   # header, footer, nav
│  ├─ lib/
│  │  ├─ payments/                 # PaymentProvider interface + mock impl
│  │  ├─ email/                    # EmailProvider interface + mock impl
│  │  └─ i18n/                     # next-intl wiring
│  ├─ messages/{he,en}.json        # all UI strings, both locales
│  └─ brand.config.ts              # single source of truth for brand data
├─ docs/                           # architecture, conventions, decisions
├─ scripts/
│  └─ ensure-importmap.mjs         # postbuild guard for Payload importMap
└─ public/                         # static assets

See docs/CODEMAP.md for the full file map.

Customizing

You want to...	Read...
Change the brand name, palette, fonts, or contact info	docs/BRAND.md
Add a new page or modify routing	docs/ARCHITECTURE.md
Set up local dev or deploy to Vercel	docs/ENVIRONMENT.md
Match the project's code style	docs/CONVENTIONS.md
Understand why a particular choice was made	docs/DECISIONS.md
Contribute back	CONTRIBUTING.md

Status

Mid-redesign. The home page uses the current theme. The other storefront pages (/shop, /product/[slug], /cart, /checkout, /about, /contact, /account) still use a legacy theme from before the redesign. Both work and ship to production. Unifying the visual language across all pages is the largest open issue — see CONTRIBUTING.md for the punch list.

The mock payment provider is the only built-in. Production deploys must implement and register a real gateway; see docs/DECISIONS.md ADR-007 for the interface and the fail-closed default.