Blitzpage

Digital business card platform. Create a professional digital business card and share it via QR code or link.

Live: dietrich.ai/blitzpage

Features

• User Authentication - Email/password registration and login with NextAuth.js
• Card Builder - Dashboard to create and edit your digital business card
• Pricing & Billing - Free / Pro / Business plans with Lemon Squeezy checkout + customer portal
• Profile Photo - Upload and display your professional photo
• Contact Information - Name, job title, company, email, phone, website
• Social Links - LinkedIn, Xing, Twitter, Instagram, GitHub
• Custom Links - Plan-based limits (Free: 3, Pro/Business: 25)
• Multi-Card Support - Business plan can manage up to 5 cards
• Theme Customization - Choose your accent color from 12 presets or custom picker
• Brand Kit (Pro/Business) - Logo upload, secondary accent color, 10 curated Google Fonts (heading + body), 4 background types (solid color, gradient, image with overlay, pattern)
• QR Code - Auto-generated QR code for easy sharing
• vCard Download - Visitors can save your contact directly to their phone
• Analytics - Plan-based retention (Free: 30 days, Pro/Business: 365 days)
• Analytics CSV Export - Available for paid plans
• Custom Domains - Available for Pro/Business plans
• Branding Removal - Public card footer hidden on paid plans
• Mobile Responsive - Optimized for all devices
• German UI - Localized for the German market

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Database: PostgreSQL
• ORM: Prisma
• Authentication: NextAuth.js
• Icons: Lucide React
• Charts: Recharts
• QR Code: react-qrcode-logo

Deployment

The app runs behind nginx on dietrich.ai at the /blitzpage base path (configured in next.config.mjs). Nginx proxies /blitzpage to localhost:3002.

Starting the production server

cd /root/blitzpage
npx next build
PORT=3002 nohup npx next start --port 3002 > /tmp/blitzpage.log 2>&1 &

Preferred production control (systemd)

sudo systemctl restart blitzpage.service
sudo systemctl status blitzpage.service

If /blitzpage returns 502, first check that blitzpage.service is active and that port 3002 is listening.

Environment variables

DATABASE_URL="postgresql://blitzpage:...@localhost:5432/blitzpage"
NEXTAUTH_SECRET="..."
NEXTAUTH_URL="https://dietrich.ai/blitzpage"
NEXT_PUBLIC_APP_URL="https://dietrich.ai/blitzpage"

SMTP_HOST="smtp.gmail.com"
SMTP_PORT="587"
SMTP_SECURE="false"
SMTP_USER="you@example.com"
SMTP_PASS="..."
EMAIL_FROM="Blitzpage <you@example.com>"

LEMON_SQUEEZY_API_KEY="..."
LEMON_SQUEEZY_STORE_ID="..."
LEMON_SQUEEZY_WEBHOOK_SECRET="..."
LEMON_VARIANT_PRO_ANNUAL="..."
LEMON_VARIANT_BUSINESS_ANNUAL="..."
LEMON_SUCCESS_URL="https://dietrich.ai/blitzpage/dashboard/billing?checkout=success"
LEMON_CANCEL_URL="https://dietrich.ai/blitzpage/dashboard/billing?checkout=cancel"
LEMON_TEST_MODE="false"

Getting Started (Development)

Prerequisites

• Node.js 18+
• PostgreSQL database

Installation

1. Install dependencies:

npm install

2. Create a .env file (see environment variables above)

3. Set up the database:

npx prisma db push

4. Start the development server:

npm run dev

Project Structure

├── app/
│   ├── (auth)/           # Login & register pages
│   ├── (dashboard)/      # Dashboard, analytics, QR, billing, cards pages
│   ├── (legal)/          # Impressum, Datenschutz, AGB
│   ├── [username]/       # Public card page (dynamic route)
│   ├── api/              # API routes (auth, cards, analytics, billing, upload)
│   ├── globals.css       # Animations, glass effects, gradients
│   ├── layout.tsx        # Root layout with metadata
│   └── page.tsx          # Landing page
├── components/
│   ├── card-preview.tsx  # Live card preview in dashboard
│   ├── public-card.tsx   # Public-facing card with vCard export
│   ├── scroll-reveal.tsx # Intersection Observer scroll animations
│   ├── image-upload.tsx  # Drag & drop photo upload
│   ├── password-strength.tsx
│   ├── providers.tsx     # NextAuth + Toast context
│   └── toast.tsx         # Notification system
├── lib/                  # Utilities (db, auth, entitlements, billing, brand kit, uploads)
├── prisma/               # Schema & migrations (plans/subscriptions/webhook events)
└── types/                # TypeScript type definitions

Database Schema

• users - User accounts + plan/subscription metadata
• cards - Business card data (1:n with users, plan-gated limits, brand kit fields)
• social_links - Social media links per card
• custom_links - User-defined links per card
• card_views - Page view analytics
• webhook_events - Idempotency tracking for Lemon Squeezy webhooks

Design

The landing page uses a dark atmospheric design inspired by Carrd:

• Dark gradient canvas flowing through the entire page
• Centered hero with a floating, glowing card as the focal point
• Glassmorphism cards with subtle borders
• Scroll-triggered reveal animations (Intersection Observer)
• Gradient orbs and grid pattern for depth
• Alternating left/right step layouts with interactive mockups
• Violet/indigo accent palette

Changelog

2026-02-18 — Brand Kit Phase 1

• Database — 6 new nullable fields on cards table: secondary_color, logo_url, heading_font, body_font, background_type, background_value
• Entitlement gating — canUseBrandKit added to entitlements (FREE: off, PRO/BUSINESS: on)
• Font infrastructure — 10 curated Google Fonts (Inter, Roboto, Open Sans, Lato, Montserrat, Raleway, Playfair Display, Merriweather, Source Code Pro, Nunito) loaded via next/font/google with CSS variables on <body>; preload: false on all except Inter for zero-cost unused fonts
• API validation — sanitizeBrandKitFields() helper validates font IDs, hex colors, local-only URLs, valid JSON; entitlement gate uses undefined (not null) to preserve existing data on downgrade
• Rendering — resolveCardBackground() and resolveCardFonts() shared helpers used by both public card and dashboard preview; 4 SVG patterns (dots, grid, diagonal, waves); logo rendered above profile photo; secondary color used for contact icon accents
• Dashboard editor — "Design" section replaced with "Branding"; Free users see upsell banner; Pro/Business users get: secondary color picker, logo upload, heading/body font dropdowns, background type selector (Standard/Vollfarbe/Verlauf/Bild/Muster) with type-specific controls (color pickers, gradient angle slider, image upload with overlay opacity, pattern selector)
• Security hardening — CSS injection prevention in background image URLs, themeColor hex validation (was previously unvalidated), color validation inside backgroundValue JSON, opacity clamping

2026-02-18 — Branded QR codes (Phase 1)

• Branded QR component — new reusable BrandedQR component wrapping react-qrcode-logo with rounded dot modules, lightning bolt logo (base64 SVG), circular logo padding, rounded eye corners, and high error correction
• Dashboard QR page updated — download button gated by logoReady state to prevent exporting before logo finishes painting
• Public card QR modal updated — same branded styling at 200px
• Removed unused deps — uninstalled qrcode.react, qrcode, @types/qrcode (26 packages removed)

2026-02-18 — Yearly-only billing & Lemon Squeezy go-live

• Switched to yearly-only billing — removed monthly variants, simplified to Pro 19€/year and Business 49€/year
• Lemon Squeezy fully configured — store (295870), API key, webhook, and variant IDs (Pro: 1320951, Business: 1320956) connected
• Billing UI simplified — removed monthly/annual toggle from dashboard, hardcoded yearly prices
• Landing page pricing updated — new prices with /Jahr suffix, subtitle changed to "Einfach & transparent"
• Webhook endpoint live — signature validation, event routing, and idempotency working; tested with real test checkout
• Customer portal fixed — portal URL now fetched via GET /customers/{id} (was incorrectly POSTing to nonexistent /portal endpoint)
• Test checkout verified — Pro subscription created successfully, webhook synced plan tier to PRO
• Test mode enabled — LEMON_TEST_MODE=true until Lemon Squeezy store activation is approved

2026-02-18 — Phase 1 monetization (Lemon Squeezy)

• Plan system added — Free / Pro / Business entitlements with centralized server-side checks
• Billing integration added — Lemon Squeezy hosted checkout, customer portal, and webhook sync
• Dashboard billing UI — plan overview, upgrade actions, and portal access
• Cards management page — create/delete/switch cards with plan-based limits
• Analytics upgraded — plan-based retention and CSV export for paid users
• Public card branding gate — paid plans can hide “Powered by Blitzpage”
• Landing pricing section — public pricing cards for Free/Pro/Business

2026-02-15 — Landing page redesign & rebrand

• Branding standardized to Blitzpage across all files
• Full landing page redesign — dark atmospheric gradient canvas, centered hero with floating card, glassmorphism, scroll-reveal animations, gradient orbs, noise texture
• New sections — interactive step mockups (registration form, editor, sharing UI), feature cards with colored icons, glowing CTA
• CSS system — custom animations (float, glow-pulse), glass effects, card tilt on hover, button shine, vertical flow lines, grid pattern overlay
• ScrollReveal component — reusable Intersection Observer wrapper with staggered delays
• Database fix — regenerated Prisma client and pushed schema (old tables replaced with current schema)
• Server restored — rebuilt Next.js app and restarted production server on port 3002

Future Enhancements

• NFC card ordering
• Apple/Google Wallet pass (Phase 2 — .pkpass + Google Wallet API, paid-tier gated)
• Email signature generator
• Team accounts with invites and roles
• Seat-based billing for teams
• Dashboard & public card visual refresh to match landing page style
• Real profile photos and content for showcase section

License

MIT