biohazard-vfx/docs/prd/06-technical.md

Technical Constraints and Integration Requirements

Existing Technology Stack

• Languages: TypeScript
• Frameworks: Next.js 15 (App Router), React 19, TailwindCSS
• Database: Prisma (SQLite/Postgres depending on env), NextAuth; optional Cloudflare D1 for contact submissions [Approved]
• Infrastructure: Next build/start, Sentry for monitoring; no infra files for Vercel/CI in repo
• External Dependencies: framer-motion/motion, lenis, uploadthing, shadcn primitives, zod, react-hook-form

Integration Approach

• Database Integration Strategy: No schema changes required; augment only content display and forms; ensure Contact writes via existing patterns or route additions without breaking Prisma clients.
• API Integration Strategy: Reuse /api/* routes; add new endpoints cautiously (e.g., contact submissions) and version if needed. For contact persistence, allow optional integration with a Cloudflare Worker/D1 via server-side fetch, without impacting existing Prisma schema.
• Frontend Integration Strategy: Introduce tokens and new components incrementally; gate behind feature flags if needed; refactor pages to consume tokens with minimal churn.
• Testing Integration Strategy: Component tests for tokens and Sticky Split mechanics; route smoke tests; accessibility checks; performance snapshots.

Code Organization and Standards

• File Structure Approach: Keep src/app/* routes; add shared components under src/components/ui/* and src/components/patterns/sticky-split/*.
• Naming Conventions: PascalCase for components, kebab for route segments, token names as --bh-*.
• Coding Standards: ESLint + Prettier existing; maintain strict TS; avoid one‑off inline styles.
• Documentation Standards: Co-locate README.md per component/pattern for usage; update main docs after shard.

Deployment and Operations

• Build Process Integration: Ensure no increase in warnings; tree-shake unused fonts/components.
• Deployment Strategy: Incremental deploys; feature flags if needed; maintain redirects for IA adjustments.
• Monitoring and Logging: Extend Sentry breadcrumbs for navigation and key CTA events.
• Configuration Management: .env unchanged; add envs for contact handling only if required (e.g., Cloudflare credentials, D1 binding endpoint).

Risk Assessment and Mitigation

• Technical Risks: Global style regressions; performance drops from animation; font loading flashes.
• Integration Risks: Breaking admin routes/layouts; IA changes affecting deep links.
• Deployment Risks: CSS purge issues; caching of old assets.
• Mitigation Strategies: Token gating and gradual rollout; perf budgets (CLS/LCP targets); redirects and manual QA script; font preloading.