JANJON — Storefront

Print-on-demand clothing shop ("JANJON", running on https://janjon.xanten.cc). Kleidung mit eigenen Designs — Print on Demand, aus Xanten. Built with Astro (SSR), React 19, Tailwind CSS v4, Drizzle + Turso/LibSQL, better-auth, Stripe, Shirtigo (POD) and Resend.

---

Table of Contents

• Prerequisites
• Quick Start
• Available Commands
• Environment Variables
• Configuration
• Type Checking & Linting
• Building for Production
• Deployment (Docker + Coolify)
• Going Live Checklist
• Further Reading

---

Prerequisites

• Nix with flakes — recommended. The repo ships a flake.nix that provides the exact toolchain (Node.js 22 + pnpm), so you never depend on a system install:

  nix develop
  

  With direnv enabled, the repo's .envrc loads it automatically on cd:

  direnv allow
  

  All commands below are run inside the dev shell (nix develop -c <command> works too).

• Or manually: Node.js 22+ and pnpm (corepack: corepack enable).

---

Quick Start

# 1. Enter the dev shell (Node 22 + pnpm)
nix develop

# 2. Install dependencies
pnpm install

# 3. Create your environment file and fill in the values
cp .env.example .env

# 4. Initialize the database tables (plain Node — run from within the dev shell)
TURSO_DATABASE_URL=file:local.db node scripts/init-db.mjs

The database is a local SQLite file during development. Keep TURSO_DATABASE_URL=file:local.db in .env locally — switch it to file:/data/local.db (Coolify) or a Turso Cloud URL only for deployment. Node scripts do not read .env automatically; pass the variable explicitly as shown above.

# 5. Start the dev server
pnpm dev

The site is now available at http://localhost:4321.

Auth redirects and trustedOrigins use SITE_URL from .env. Leave it at https://janjon.xanten.cc (or your local domain) — it must always match where the app is served from, otherwise login/passkey flows break.

---

Available Commands

Command	Action
dev	Start the Astro dev server with hot-reload at http://localhost:4321
build	Create a production build (dist/) for the SSR server
preview	Preview the production build locally
cache-images	Pre-cache Shirtigo product images (node scripts/cache-images.mjs)
astro check	Full Astro type check (syncs .astro types first)
check-types	tsc --noEmit — works after .astro/types.d.ts was generated (run pnpm dev or pnpm astro check once on a fresh clone)
lint / lint:fix	ESLint (fix errors in place with lint:fix)
format	Prettier formatting across src/
clean	Remove the .astro build cache

---

Environment Variables

See .env.example for the full, commented list. Summary:

Variable	Required	Purpose
SITE_URL	yes	Canonical domain — auth redirects, sitemap, OG/canonical URLs
TURSO_DATABASE_URL	yes	file:/data/local.db (Coolify) or Turso Cloud URL
TURSO_AUTH_TOKEN	for Turso Cloud	Auth token (not needed for local file DBs)
STRIPE_SECRET_KEY	yes	Stripe server key
PUBLIC_STRIPE_PUBLISHABLE_KEY	yes	Stripe publishable key (client)
STRIPE_WEBHOOK_SECRET	yes	Verifies Stripe webhooks
SHIRTIGO_API_TOKEN	yes	Shirtigo print-on-demand API
SHIRTIGO_WEBHOOK_SECRET	yes	Verifies Shirtigo webhooks
RESEND_API_KEY	yes	Transactional email (Resend)
RESEND_FROM	no	Sender, default JANJON <noreply@janjon.xanten.cc>
ADMIN_ORDER_EMAIL	no	Order-notification recipient, default steltner@pm.me
CONTACT_EMAIL	no	Contact-form recipient, default steltner@pm.me
ENCRYPTION_KEY	yes	Base64 32-byte AES key — openssl rand -base64 32. Never rotate once orders exist (encrypted addresses/emails)

Optional: SHIRTIGO_PROJECTS_CACHE_TTL_MS, SHIRTIGO_PRODUCTS_CACHE_TTL_MS, SHIRTIGO_PRODUCT_PRICE_FIELD, SHIRTIGO_DISABLE_CACHE.

---

Configuration

• Site / brand / legal data: edit src/consts.ts (SITE_URL, SITE_TITLE, COMPANY_INFO, INVOICE_CONFIG). Company address, contact, and invoice details are currently placeholders — fill in real data before going live.
• Legal pages: src/pages/impressum.astro, widerruf.astro, agb.astro, datenschutz.astro. The shop operates under the Kleinunternehmerregelung (§ 19 UStG) — invoices show no USt and no USt-ID.
• Site URL: astro.config.mjs reads SITE_URL; src/consts.ts uses it for canonical/OG metadata and better-auth trustedOrigins.

---

Type Checking & Linting

pnpm astro check     # full Astro-aware type check (recommended)
pnpm check-types     # plain tsc — needs .astro types generated first
pnpm lint            # ESLint
pnpm lint:fix        # auto-fix lint errors
pnpm format          # Prettier

Run astro check before committing — it catches type errors in .astro files, import.meta.env access, and API routes.

---

Building for Production

SITE_URL=https://janjon.xanten.cc pnpm build

The build emits an SSR server (dist/server/entry.mjs) plus static assets (dist/client). The sitemap and canonical URLs are derived from SITE_URL.

---

Deployment (Docker + Coolify)

The Dockerfile builds the standalone Node.js server, exposing port 3000.

Startup sequence (Docker CMD):

1. node scripts/init-db.mjs — ensures DB tables exist
2. node scripts/cache-images.mjs — pre-caches Shirtigo product images
3. node ./dist/server/entry.mjs — starts the Astro SSR server

docker build -t ink-shop .
docker run -p 3000:3000 --env-file .env ink-shop

On Coolify:

• Set all env vars from .env.example in the Coolify environment.
• Expose port 3000.
• SITE_URL must match the domain assigned in Coolify (https://janjon.xanten.cc).
• TURSO_DATABASE_URL=file:/data/local.db with a persistent volume mounted at /data (see scripts/backup-db.sh for the nightly backup setup on the host).

---

Going Live Checklist

Before opening the shop to the public:

1. Real company data in src/consts.ts (COMPANY_INFO, INVOICE_CONFIG) and on the legal pages (impressum, widerruf, agb, datenschutz).
2. Stripe webhook → https://<SITE_URL>/api/webhooks/stripe (events: payment_intent.succeeded, payment_intent.payment_failed).
3. Shirtigo webhook → https://<SITE_URL>/api/webhooks/shirtigo.
4. Resend: verify the sending domain (DKIM/SPF) in the Resend dashboard.
5. Admin role: UPDATE user SET role='admin' WHERE email='steltner@pm.me';
6. Backups: set up scripts/backup-db.sh via cron (see ARCHITECTURE.md §12).

---

Further Reading

• ARCHITECTURE.md — tech stack, DB schema, payment/fulfillment flow, API routes, backups
• SECURITY-HARDENING.md — security layers and hardening roadmap