breakpilot-lehrer/website

BreakPilot Website

Marketing- und Pricing-Website fuer BreakPilot mit Stripe Checkout Integration.

Tech Stack

• Framework: Next.js 15.1.6
• Styling: Tailwind CSS 3.4
• Language: TypeScript 5.7
• Payment: Stripe Checkout (via Billing Service)

Lokale Entwicklung

Voraussetzungen

• Node.js 20+
• npm oder yarn

Installation

cd website
npm install
npm run dev

Website ist dann unter http://localhost:3000 erreichbar.

Docker

Build

docker build -t breakpilot-website \
  --build-arg NEXT_PUBLIC_BILLING_API_URL=http://localhost:8083 \
  --build-arg NEXT_PUBLIC_APP_URL=http://localhost:8000 \
  .

Run

docker run -p 3000:3000 breakpilot-website

Mit Docker Compose

# Aus dem Root-Verzeichnis
docker compose up -d website

Umgebungsvariablen

Variable	Beschreibung	Default
NEXT_PUBLIC_BILLING_API_URL	URL zum Billing Service	http://localhost:8083
NEXT_PUBLIC_APP_URL	URL zur BreakPilot App	http://localhost:8000
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY	Stripe Public Key	-

Build-Zeit vs. Runtime

NEXT_PUBLIC_* Variablen werden zur Build-Zeit eingebettet. Fuer Docker:

docker build \
  --build-arg NEXT_PUBLIC_BILLING_API_URL=https://api.breakpilot.de \
  --build-arg NEXT_PUBLIC_APP_URL=https://app.breakpilot.de \
  --build-arg NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxx \
  .

Stripe Integration

Flow

1. Nutzer waehlt Plan auf der Pricing-Seite
2. Nutzer gibt E-Mail ein
3. Website ruft POST /api/v1/billing/trial/start am Billing Service auf
4. Billing Service erstellt Stripe Checkout Session
5. Nutzer wird zu Stripe Checkout weitergeleitet
6. Nach Zahlung: Redirect zu /success?session_id=xxx
7. Success-Seite zeigt Bestaetigung und leitet zur App weiter

API Endpunkt

POST /api/v1/billing/trial/start
Content-Type: application/json

{
  "plan_id": "basic" | "standard" | "premium",
  "email": "user@example.com"
}

Response:
{
  "checkout_url": "https://checkout.stripe.com/..."
}

Seiten

Route	Beschreibung
/	Landing Page mit Hero, Pricing, Trust-Sektion
/success	Erfolgsseite nach Stripe Checkout
/cancel	Abbruchseite wenn Checkout abgebrochen

Produktion

Empfohlene Konfiguration

NEXT_PUBLIC_BILLING_API_URL=https://api.breakpilot.de
NEXT_PUBLIC_APP_URL=https://app.breakpilot.de
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxx

SSL/TLS

Fuer Produktion sollte ein Reverse Proxy (nginx, Traefik) mit SSL verwendet werden.

Projektstruktur

website/
├── app/
│   ├── globals.css      # Tailwind + Custom Styles
│   ├── layout.tsx       # Root Layout
│   ├── page.tsx         # Landing Page
│   ├── success/
│   │   └── page.tsx     # Checkout Erfolgsseite
│   └── cancel/
│       └── page.tsx     # Checkout Abbruchseite
├── components/
│   ├── Header.tsx       # Navigation
│   ├── PricingSection.tsx # Pricing Cards + Modal
│   └── Footer.tsx       # Footer
├── Dockerfile           # Multi-stage Docker Build
├── next.config.mjs      # Next.js Konfiguration
├── tailwind.config.ts   # Tailwind mit BreakPilot Farben
└── package.json