How to vibe codePhrase

Prerequisites

• Node.jsfree

  Runtime environment for TypeScript full-stack development

• GitHubfree

  Code repository hosting and webhook integration target

• Cloudflare accountfree

  Hosting the Next.js app, D1 SQLite database, and R2 global OTA edge distribution bucket

AI coding tools

• Claude Code

  Unmatched capability for scaffolding complex multi-file AST parsers, database schemas, and API routers from natural language prompts

• Cursor

  Ideal for fine-tuning React UI components and debugging complex CAT editor state management interactively

Build guide

1. 01Scaffold Project & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure better-auth, and set up Cloudflare D1 SQLite tables for projects, translation keys, translation segments, and translation memory (TM).

   Create a new Next.js TypeScript application configured for Cloudflare Pages with D1 SQLite bindings. Establish the core database schema using Drizzle ORM or native SQL migrations with the following tables: 'projects' (id, name, created_at), 'locales' (id, project_id, code, name), 'keys' (id, project_id, key_name, description, tags), 'translations' (id, key_id, locale, content, status [untranslated, machine, reviewed], updated_at), and 'translation_memory' (id, source_text, target_text, source_locale, target_locale, score). Add a better-auth configuration supporting email/password authentication linked to the D1 database. Ensure strict TypeScript types across all database entities and create a clean dashboard layout shell with sidebar navigation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build Multi-Format File Parsers

   Implement robust AST parsing modules for importing and exporting standard developer file formats like JSON, YAML, and iOS/Android strings files.

   Build a robust localization file parsing engine inside a dedicated 'lib/parser' utility module. The engine must support importing and exporting standard localization formats: nested JSON, YAML, Android strings.xml, and iOS Localizable.strings. It must correctly extract string keys, values, and comments while preserving embedded placeholders like '%s', '{name}', and HTML tags without corrupting syntax. Write comprehensive unit tests covering malformed files, escaped characters, and nested pluralization rules to ensure zero syntax breakage during round-trip imports and exports.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build the CAT Editor Web Interface

   Create a Computer-Assisted Translation (CAT) editor interface featuring translation memory matching, inline comments, and editing workflows.

   Develop a feature-rich CAT (Computer-Assisted Translation) editor page in Next.js (`app/projects/[id]/editor/page.tsx`). Create a split-pane table view where source language strings appear on the left and target language translation inputs appear on the right. Include a sidebar displaying exact and fuzzy matches from the translation memory table, character counts, key tags, and translator comment threads. Implement keyboard shortcuts (e.g., Enter to save and advance to next row, Ctrl+Space to insert machine translation suggestion) and inline status badges for untranslated, machine-translated, and human-reviewed states.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Integrate AI Translation Routing

   Connect DeepL and OpenAI/Anthropic APIs via Vercel AI SDK to automate pre-translation and leverage custom glossaries.

   Implement an AI translation routing service using the Vercel AI SDK and the DeepL API (`lib/translation.ts`). Create backend server actions that take source strings, target locales, and project glossaries, and dispatch translation requests to DeepL or LLM endpoints with system prompts enforcing a specified brand voice and literal placeholder retention. Add a bulk pre-translation endpoint that iterates through unassigned project keys, populates machine translations, and logs translation quality confidence scores into the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05GitHub Webhook Synchronization

   Build an endpoint to ingest GitHub repository webhooks, automatically parsing and syncing localization keys on push events.

   Implement a secure GitHub webhook handler endpoint (`app/api/webhooks/github/route.ts`) that listens for push events on designated branches. When localization files (e.g., `locales/en.json`) are updated in a repository, the webhook must verify the HMAC signature, fetch the raw file contents via the GitHub API, parse the keys through our AST parser module, and automatically upsert new keys into the database while flagging modified strings for review. Include an admin settings UI in the project dashboard to configure repository connections, branch filters, and webhook secrets.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Over-The-Air (OTA) Edge Distribution

   Build an OTA endpoint and client SDK wrapper that publishes compiled translation JSON dictionaries to Cloudflare R2 for instant mobile/web updates.

   Build an Over-The-Air (OTA) publishing pipeline and client distribution endpoint. Create an API route (`app/api/ota/[projectId]/[locale]/route.ts`) that compiles approved translations into optimized JSON dictionaries and caches them in Cloudflare R2 object storage with appropriate cache-control headers. Write a lightweight client JavaScript SDK (`sdks/ota.ts`) that fetches, caches locally, and updates translation dictionaries in memory without requiring app redeployments. Include a 'Publish Release' button in the dashboard that triggers the bundle generation and invalidates edge caches.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Phrase