Marco
225a8567a9
The delivery-time range (handling + transit days) was a hardcoded HANDLING_DAYS/TRANSIT_DAYS_DE pair in lib/shipping.ts — changing it needed a code deploy. Now sourced from Payload's new Shipping Settings collection via getShippingSettings(), threaded down as a prop to the few Client Components (Cart/Checkout/VersandModal) that can't fetch it themselves, with the old code constants removed. Also: the delivery-time note is now shown on every purchase CTA (shop grid, home spotlight, ToDo-Karten hero + pricing panel), not just one of them — required next to each buy button per Art. 246a §1 Abs.1 Nr.8 EGBGB, not just somewhere reachable via a link. Checkout's sidebar was missing the "ab 39€ kostenlos" note Cart already had; that's fixed too, and both now show the delivery-time range on its own line instead of crammed onto the shipping-cost line. Related smaller fixes bundled in since they touch the same files: price/delivery-time spacing tightened into its own group, the redundant "Sichere Zahlung" note under Cart's checkout button (already shown via the trustBadges list right below) replaced with "Sichere SSL-Verschlüsselung" to match Checkout, and ToDo-Karten's pricing panel no longer shows a premature payment-security note at the add-to-cart step.
einfach-produktiv — Frontend
Next.js frontend for einfach-produktiv.mk360.de,
Coolify-managed and deployed from this repo (git.mk360.de/Marco/einfach-produktiv).
For the VPS-wide infrastructure this app runs on (Caddy, Coolify, Gitea, the
shared Payload instance), see ~/dev/README.md — this file only covers what's
specific to this project.
Stack
- Next.js 16.2.9 (App Router,
output: "standalone"for a small Docker image — seeAGENTS.mdbefore touching anything version-specific, this Next.js release differs from older training-data conventions) - React 19.2.4, Tailwind CSS 4, Motion for animation
- No local database, no auth — all editable content comes from the shared
Payload CMS at
payload.mk360.de(see below)
Getting started
npm install
npm run dev
Open http://localhost:3000. npm run build && npm run start reproduces the production build locally — do this before pushing,
since Coolify builds with --no-cache and a failed build only surfaces there
otherwise.
Environment variables: PAYLOAD_URL (defaults to https://payload.mk360.de
if unset, see app/lib/payload.ts). Set in Coolify's app settings for
production, not in a committed .env — this app has no other secrets.
Pages
| Route | Purpose |
|---|---|
/ |
Home — hero, product spotlight, tools grid, trust row |
/shop |
Product grid (all active products for this tenant) |
/blog, /blog/[slug] |
Blog overview + post detail |
/cart |
Cart (localStorage-backed, see below) |
/checkout |
Shipping + payment method selection, order summary |
/bestellbestaetigung |
Order confirmation — reads the one-time snapshot /checkout wrote |
/challenge |
"Mini-Challenge" tool |
/todo-cards |
"Todo-Karten" tool |
/newsletter |
Newsletter signup |
/versand |
Shipping policy (timeframes, costs) |
/impressum, /datenschutz, /agb, /widerruf |
Legal pages (from Payload, see legal-pages below) |
Content backend: Payload CMS
This app is one tenant in a shared, multi-tenant Payload instance also
used by other projects on the same VPS (see docker/payload/ in the infra
repo). All content queries go through app/lib/payload.ts, which hardcodes
TENANT_SLUG = "einfach-produktiv" and filters every request with
where[tenant.slug][equals]=einfach-produktiv — the tenant field itself is
injected automatically into every collection below by Payload's
multiTenantPlugin, not defined in this app.
/api/products is this app's own same-origin proxy route (app/api/products/route.ts)
in front of getProducts() — used by client components (cart, related
products) that need the catalog reactively, so they don't talk to Payload's
API directly and reuse Next.js's fetch cache instead of an extra round trip.
Collections used by this tenant
All reads are public (access.read: () => true); only writes are
admin-gated in the Payload admin UI at payload.mk360.de/admin.
| Collection (slug) | Used for | Key fields |
|---|---|---|
products |
/shop grid, homepage spotlight, cart, checkout |
name, slug (cart item id — not Payload's numeric id, so existing localStorage carts survive catalog changes), description, price, compareAtPrice (optional strikethrough), image, detailHref, sortOrder, spotlight + spotlightEyebrow/spotlightHeadline/spotlightText/spotlightImage (homepage "Neu im Shop" section — falls back to image if no dedicated spotlight image is set) |
posts |
/blog, /blog/[slug] |
title, slug, category (relation to categories), excerpt, thumbnail, content (richText), readTime (auto-calculated on save from word count), featured (shown as the /blog hero post; most-recently-published wins if several are marked), publishedAt |
categories |
Blog post categorization | name, slug (unique per tenant, not globally) |
legal-pages |
/impressum, /datenschutz, /agb, /widerruf |
type (impressum/datenschutz/agb/widerruf, one doc per type per tenant), title, content (richText), attachment (optional file, e.g. the Muster-Widerrufsformular PDF) |
trust-badges |
Horizontal "Schneller Versand / Versandkostenfrei / Mit Liebe verpackt" row — shown on /shop, /cart, /checkout, /widerruf, /agb, 404 |
title, description, icon, sortOrder |
cart-trust-badges |
Sidebar bullets on /cart (title only) and /checkout (title + description) — deliberately a separate collection from trust-badges so the two pages can't drift into showing different claims |
title, description, icon, sortOrder |
shipping-methods |
/checkout shipping selection |
title, description, price, freeShippingThreshold (per-method, optional — leave empty for a method that should never be free, e.g. Express), active (inactive methods are hidden, not shown disabled), sortOrder |
payment-methods |
/checkout payment selection |
title, icons (array — e.g. 3 logos for "Kreditkarte"), active, sortOrder |
werkzeuge-cards |
Homepage "Meine Werkzeuge" 3-card grid | title, description, icon, ctaLabel, ctaHref, sortOrder |
media |
Shared upload collection (not tenant-scoped) backing every image/icon/thumbnail/attachment field above |
alt (required for images), title (optional display name for download links) |
Editorial changes (prices, copy, images, toggling a shipping/payment method
on or off) all happen in the Payload admin UI — no code deploy needed. Adding
a new field to any collection above requires editing the collection file in
docker/payload/src/collections/ and a migration, which does need a deploy
of the Payload service.
Cart & checkout — demo status
- Cart (
app/lib/cart.ts) is entirely client-side, stored inlocalStorageunderep_cart, keyed by each product'sslug. - Checkout has no real backend.
/checkout's "Jetzt kaufen" click writes a one-time snapshot (chosen shipping/payment method, cart contents) tosessionStorage(app/lib/order.ts), which/bestellbestaetigungreads once and displays — that snapshot is the order record. There is no payment processing, no persisted order in Payload or anywhere else, and no confirmation email yet. Treat this as a frontend/demo checkout flow, not a functioning store.
Deployment
- Dockerfile: 3-stage build (
deps→builder→runner) with BuildKit cache mounts, producing a ~100 MB standalone image. This is the referenceDockerfilecopied when scaffolding new projects on this VPS (see the infra repo's new-project workflow). - Deploys via
git push→ Gitea webhook → Caddy/deploy/einfach-produktivbridge → Coolify API → rebuild + restart. Full mechanics in~/dev/README.md.
Related design source
~/dev/einfach-produktiv/mockups/— Figma-stage mockup PNGs~/dev/einfach-produktiv/styleguide.md— design tokens (colors, type, spacing)~/dev/einfach-produktiv/einfachproduktiv_figma_prompt_guide_v3.md— Figma rebuild prompt guide