Skip to content

Latest commit

 

History

History
180 lines (139 loc) · 9.06 KB

TODO.md

File metadata and controls

180 lines (139 loc) · 9.06 KB

Blitzpage - Open Todo List

Generated from comprehensive Playwright testing on 2026-01-26

Brand Kit Phase 1 — Manual Testing Checklist

Testing steps for the Brand Kit feature (logo, dual colors, fonts, backgrounds).

Setup

  1. Build and deploy: npm run build && sudo systemctl restart blitzpage.service
  2. Ensure test user is on PRO tier: 
    UPDATE users SET plan_tier = 'PRO', subscription_status = 'ACTIVE'
WHERE email = 'your-email@example.com';

PRO User Tests

  • Dashboard Branding section — Log in, go to dashboard, scroll past "Eigene Links" to "Branding"
  • Primärfarbe — 12 color presets + custom picker still work as before
  • Akzentfarbe (sekundär) — Pick a secondary color, verify "Zurücksetzen" clears it
  • Logo upload — Upload a logo image, verify it appears in live preview above the profile photo
  • Schriftarten — Select a heading font (e.g. Playfair Display) and body font (e.g. Nunito), verify preview updates
  • Hintergrund: Vollfarbe — Select "Vollfarbe" pill, pick a color, verify background changes in preview
  • Hintergrund: Verlauf — Select "Verlauf", pick two colors, adjust angle slider, verify gradient preview
  • Hintergrund: Bild — Select "Bild", upload an image, adjust overlay opacity slider
  • Hintergrund: Muster — Select "Muster", try dots/grid/diagonal/waves, pick pattern color
  • Save & reload — Click "Speichern", reload dashboard, verify all brand kit settings persist
  • Public card — Visit /<username> in a new tab, verify:
    • Logo renders above photo
    • Heading font applies to name
    • Body font applies to bio/subtitle
    • Secondary color shows on contact icons and social link shadows
    • Background renders correctly (or default atmosphere if no bg set)
  • Live preview — Toggle each brand kit setting, verify CardPreview updates in real-time

FREE User Tests

  • Upsell banner — Downgrade user to FREE, verify Branding section shows only color picker + upsell text: "Logo, Zweitfarbe, Schriftarten und Hintergründe — verfügbar ab Pro."
  • No brand kit controls — Verify accent color, logo, fonts, background sections are hidden
  • API gating — Saving with brand kit fields as FREE user should silently ignore them (existing data preserved)

Backwards Compatibility

  • Existing cards — A card with no brand kit fields set renders exactly as before (default page-canvas background, no logo, default Inter font)
  • No regressions — Profile photo, contact info, social links, custom links, QR code all still work

Validation

  • Invalid font — Try modifying API request with invalid font ID → should return 400
  • Invalid color — Try saving non-hex secondaryColor → should return 400
  • External URL — Try saving logoUrl pointing to external domain → should return 400
  • Malformed JSON — Try saving broken backgroundValue → should return 400

Edge Cases

  • Malformed DB data — Manually set background_value to '{{broken' in DB → public card should render default (no crash)
  • Build check — npm run build succeeds with zero errors

Immediate Next Steps (Billing Rollout)

  • Activate Lemon Squeezy store - Application under review. Once approved, verify customer portal works ("Kundenportal öffnen" button). Then set LEMON_TEST_MODE="false" in .env and restart service to go live.
  • Run end-to-end billing smoke test - Validate checkout, webhook sync, portal access, cancellation, and downgrade behavior.
  • Add uptime check for blitzpage.service - Alert if blitzpage.service stops so nginx /blitzpage does not return 502.

Priority: HIGH (Critical Issues)

Security

  • Add HTTPS enforcement - Currently running on HTTP; configure SSL/TLS for production
  • Implement CSRF protection - Add CSRF tokens to all form submissions
  • Add Content Security Policy (CSP) header - Protect against XSS attacks
  • Add rate limiting - Prevent brute force attacks on login/register endpoints

Authentication

  • Add email verification - Verify user email addresses after registration
  • Implement session timeout - Auto-logout after inactivity period
  • Add "Remember me" option - Persistent login for trusted devices

Data Validation

  • Add server-side validation for all inputs - Prevent malformed data
  • Validate URL formats - Ensure website and social links are valid URLs
  • Validate phone number format - Consider using a phone number library
  • Sanitize bio/text inputs - Prevent XSS through user content

Priority: MEDIUM (Important Improvements)

Dashboard Improvements

  • Add image cropping - Allow users to crop uploaded photos
  • Add LinkedIn profile import - Auto-fill from LinkedIn data
  • Add multi-language support - German + English at minimum

Priority: LOW (Nice to Have)

Accessibility

  • Ensure color contrast ratios - WCAG 2.1 AA compliance
  • Add keyboard shortcuts - Power user features

Analytics Enhancements

  • Add geographic data - Show where views are coming from
  • Add referrer tracking - Show traffic sources
  • Add device/browser breakdown - Mobile vs desktop stats
  • Add export analytics data - CSV/PDF download
  • Add date range selector - Custom date ranges for analytics
  • Add comparison periods - This week vs last week

QR Code Improvements

  • Phase 1: Branded QR code - Lightning logo + rounded dots + high error correction
  • Phase 2: Apple Wallet / Google Wallet passes - .pkpass + Google Wallet API, paid-tier gated, offline QR at trade fairs
  • Add multiple QR code sizes - For different print uses
  • Add SVG download option - Vector format for print
  • Add print-ready PDF - Business card template with QR

Design & Theming

  • Add dark mode - System preference detection
  • Add more theme colors - Expand color palette options
  • Add card templates - Pre-designed card layouts
  • Add custom fonts - Font selection for cards (Brand Kit Phase 1)
  • Add background patterns - More design options (Brand Kit Phase 1)
  • Brand Kit Phase 1 — Logo, dual colors, fonts, backgrounds (PRO/BUSINESS only) Implemented: logo upload, secondary accent color, 10 curated Google Fonts (heading + body), 4 background types (solid/gradient/image/pattern). Dashboard "Branding" section with entitlement gating. Server-side validation. Live preview.
  • Brand Kit Phase 2 — Layout templates, custom CSS, full Google Fonts Remaining from original plan: card layout templates (3-5 variants), custom CSS for Business tier, full Google Fonts search, light/dark logo variants.

Performance

  • Add image optimization - Compress uploaded photos
  • Implement lazy loading - For images and heavy components
  • Add service worker - Offline support and caching
  • Optimize bundle size - Code splitting and tree shaking

Additional Features

  • Add multiple cards - Allow users to create multiple business cards
  • Add card sharing via NFC - For modern smartphones
  • Apple Wallet / Google Wallet support - See Phase 2 under QR Code Improvements above (paid tiers only).
  • Add contact form - Let visitors send messages
  • Add appointment booking - Calendly-style integration
  • Add social proof - Testimonials, endorsements
  • Add team/organization features - Company-wide cards
  • Add API access - For integrations
  • Add webhooks - Notify on card views

Technical Debt

Code Quality

  • Add unit tests - Test components and utilities
  • Add integration tests - Test API endpoints
  • Add E2E tests - Automated user flow testing
  • Add error boundaries - Graceful error handling in React
  • Implement proper logging - Server-side logging for debugging

Infrastructure

  • Set up CI/CD pipeline - Automated testing and deployment
  • Add environment configuration - Proper env var management
  • Implement database backups - Regular automated backups
  • Add health check endpoint - For monitoring
  • Set up error monitoring - Sentry or similar

Documentation

  • Add API documentation - Document all endpoints
  • Add component documentation - Storybook or similar
  • Add deployment guide - Step-by-step deployment instructions
  • Add contributing guide - For open source contributions

Lemon Squeezy Product Polish

  • Add product images - Upload cover images for Pro and Business products in Lemon Squeezy
  • Customize thank-you email - Edit the post-purchase confirmation email template
  • Add product descriptions - Write marketing copy for the checkout page
  • Review checkout branding - Upload logo, set brand colors, check receipt page text
  • Test full checkout flow - Run a test purchase end-to-end with LEMON_TEST_MODE=true