How to vibe codeLinguise

Prerequisites

• Node.jsfree

  Required for running the Next.js framework and build tools.

• GitHubfree

  Code repository and deployment linkage for Cloudflare and Vercel.

• Cloudflare Accountfree

  Required for hosting the reverse-proxy worker and edge database caching.

AI coding tools

• Claude Code

  Unmatched capability for scaffolding multi-file full-stack systems, managing complex edge routing logic, and debugging proxy pipeline failures.

• Cursor

  Ideal for iterative frontend dashboard development and refining the live WYSIWYG injection script.

Build guide

1. 01Scaffold Dashboard and Database Schema

   Initialize a Next.js application with Tailwind CSS and set up Turso SQLite using Drizzle ORM to store user domains, language targets, translation memory strings, and manual overrides.

   Create a new Next.js project configured with TypeScript and Tailwind CSS. Define a Drizzle ORM schema targeting Turso SQLite with tables for `domains` (id, userId, targetDomain, sourceLanguage), `translations` (id, domainId, sourceHash, targetLang, translatedText, isManual), and `rules` (id, domainId, pattern, action). Implement database connection utilities and environment variable validations. Ensure clean folder structure and strict type safety throughout.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Implement Authentication with better-auth

   Configure better-auth in the Next.js app to handle user signup, login, and secure session management backed by the Turso database.

   Integrate `better-auth` into the Next.js application, connecting it to our Turso SQLite database via Drizzle. Set up email/password authentication endpoints, protected route middleware for the dashboard paths, and clean React authentication hooks for client-side state handling. Test registration and login flows locally.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build the Central Dashboard Interface

   Create a management dashboard where users can add domains, configure target languages, view word usage quotas, and manage translation rules.

   Build a polished SaaS dashboard UI using Tailwind CSS. Include a domains list view with an 'Add Domain' modal, a detailed domain view showing configured target languages, a word quota usage meter, and a custom translation rules manager table. Implement API routes in Next.js to handle CRUD operations for these entities securely tied to the authenticated user.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Develop the Edge Reverse-Proxy Worker

   Build a Cloudflare Worker script that acts as a reverse proxy, intercepting incoming requests for target sites, inspecting HTML responses, checking translation cache, and rewriting links.

   Write a Cloudflare Worker script in TypeScript that functions as a reverse proxy. The worker must accept requests for a given target domain, fetch the original content from the origin server, parse HTML chunks using `HTMLRewriter` or standard parsing, extract translatable text nodes, check a local D1 or remote Turso cache for existing translations, and inject appropriate `hreflang` alternate links into the HTML head. Handle relative asset URLs by rewriting them back to the origin domain.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Integrate Translation Pipeline and Fallback API

   Connect the Cloudflare Worker to DeepL API or OpenAI API to automatically translate missing text chunks on cache misses, updating the translation memory asynchronously.

   Enhance the Cloudflare Worker proxy script to handle cache misses for text strings. When a text node is not found in the translation database, batch the untranslated strings and send them to the DeepL API (or OpenAI API via Vercel AI SDK) specifying the target language. Store the newly generated translations back into the database cache with an expiration timestamp and return the translated HTML stream to the client.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Build the Live Frontend WYSIWYG Editor Overlay

   Create an injectable JavaScript script that overlays the target website when logged in, enabling inline editing of translated strings and syncing updates back to the backend.

   Develop a client-side JavaScript snippet that can be injected into target websites. When a user is authenticated via the dashboard cookie token, the script highlights translatable text blocks on hover, opens an inline contenteditable box or modal when clicked, and sends updated overrides via `fetch` to our backend API endpoint to persist manual corrections in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Linguise