How to vibe codeiubenda

Prerequisites

• Node.jsfree

  Required for running the full-stack Next.js development environment.

• GitHubfree

  Source control and deployment pipeline integration.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex backend logic and policy template engines.

• Cursor

  Ideal for fine-tuning the cookie banner UI components and script-blocking client snippets.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Turso and better-auth, setting up database tables for sites, generated policies, and consent log audit trails.

   Initialize a new Next.js 16 project with Tailwind CSS 4 and TypeScript. Configure Turso (libSQL) as the database client. Create database schemas using Drizzle ORM for: (1) `sites` (id, user_id, domain, created_at), (2) `policies` (id, site_id, language, content_json, version, updated_at), and (3) `consent_logs` (id, site_id, visitor_hash, consent_state_json, ip_country, timestamp). Implement better-auth for single-user owner authentication. Ensure all migrations run cleanly on startup.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Policy Generator Engine

   Build the dynamic clause assembler that compiles structured site services into structured markdown/HTML privacy and cookie policies.

   Create a policy generator service in Next.js. Define a modular library of lawyer-drafted legal clause templates for standard web services (e.g., Google Analytics, Stripe, Mailchimp, Hosting). Build an admin form where users select their active services and target languages (English, Italian, Spanish, French, German). Write a compiler function that aggregates selected clauses into a cohesive, structured privacy policy document rendered in clean HTML/Markdown with automatic versioning.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Consent Banner Widget & UI Customizer

   Develop the embeddable cookie consent banner widget with styling customization options and local state persistence.

   Build a lightweight, embeddable React/vanilla JS cookie consent banner widget. Create a dashboard UI to customize banner colors, position (bottom bar vs center modal), cookie categories (Necessary, Analytics, Marketing, Preferences), and language strings. The widget must render an accessible banner on target sites, store user preferences in local storage and cookies, and expose a global `window.iubendaConsent` state API for external script verification.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Prior Script-Blocking Proxy & Snippet

   Implement the client-side JavaScript wrapper that intercepts and blocks third-party trackers until explicit user consent is registered.

   Write a lightweight asynchronous script snippet (to be embedded on client websites) that intercepts third-party script tags (e.g., `<script type='text/plain' data-consent='analytics'>`). The script must monitor the banner consent state, dynamically evaluate whether specific categories are permitted, and rewrite/execute the blocked tags in the DOM only after valid user consent is logged. Include fallback handling when no consent has been given yet.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Audit-Proof Consent Logging API

   Build a secure, tamper-evident consent logging backend endpoint that stores cryptographic proofs of user consent.

   Implement a secure API endpoint `/api/v1/consent/log` that accepts visitor consent submissions from embedded banners. Validate incoming payloads against the site configuration, hash the visitor IP/userAgent for privacy compliance, generate a cryptographic timestamped proof token, and store an immutable record in the `consent_logs` table. Build a dashboard view to inspect, filter, and export these consent audit logs for compliance verification.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Geo-IP Regulatory Routing & Google Consent Mode v2

   Add geo-location detection to route visitors to appropriate consent flows and integrate Google Consent Mode v2 mapping signals.

   Integrate Cloudflare request headers or a geo-IP lookup utility to detect visitor country/region. Automatically apply appropriate compliance rules (e.g., strict prior opt-in for EU GDPR, notice-at-collection for US CCPA). Implement Google Consent Mode v2 parameter mapping (`ad_storage`, `analytics_storage`, `ad_user_data`, `ad_personalization`) directly into the consent banner state updater, dispatching `gtag('consent', 'update', ...)` calls dynamically based on user choices.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for iubenda