How to vibe codePOEditor

Prerequisites

• Node.js LTSfree

  Runtime environment for the full-stack TypeScript application framework.

• GitHubfree

  Source control and target for testing continuous synchronization webhooks.

• Cursorfree tier / $20/mo

  AI-native code editor to scaffold and iterate on complex parsing logic.

AI coding tools

• Claude Code

  Autonomous agentic coding tool capable of implementing multi-file parsing engines and database schemas in one run.

• Cursor

  Essential for reviewing complex diffs across translation editor components and database migrations.

Build guide

1. 01Scaffold Project & Database Schema

   Initialize the Next.js application with TypeScript, configure Tailwind CSS, set up better-auth, and define the core Postgres schema in Neon for projects, languages, terms, translations, and translation memory.

   Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth for secure email/password authentication. Configure Drizzle ORM connected to a Neon PostgreSQL database. Define the database schema with the following tables: 'projects' (id, name, description, reference_language, created_at), 'languages' (id, project_id, code, name, created_at), 'terms' (id, project_id, term_key, context, comment, created_at), 'translations' (id, term_id, language_id, content, status [translated, untranslated, fuzzy], updated_at), and 'translation_memory' (id, project_id, source_text, target_text, target_language). Ensure all relational foreign keys have appropriate cascading deletes and indexes on frequently queried fields like project_id and term_key.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build Localization File Parsers

   Implement robust parsing and exporting utilities for standard localization formats including JSON, PO/POT files, and Android strings.xml.

   Implement a localization file parser utility module in TypeScript that can import and export JSON, gettext PO/POT files, and Android strings.xml. For JSON, handle nested key-value objects flattening keys with dot notation. For PO files, parse msgid and msgstr pairs accurately. Build export functions that convert database terms and translations back into valid file payloads matching the original imported structure. Include comprehensive unit tests verifying edge cases with special characters, escaped quotes, and plurals.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build Translation Editor Dashboard

   Create a responsive web interface allowing users to manage terms, filter by tags, edit translations inline, and toggle status flags.

   Build a dashboard UI in Next.js using Tailwind CSS for managing translation projects. Create a project view with a data table displaying terms as rows and target languages as columns. Enable inline editing for translations with optimistic updates, status toggling (untranslated, translated, fuzzy), and search/filtering by term key or tag. Add a modal for importing and exporting localization files using the parser utilities built in the previous step.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Integrate AI Translation & Translation Memory

   Connect the Vercel AI SDK and DeepL API to provide automated translation suggestions and leverage historical translation memory.

   Integrate the Vercel AI SDK and DeepL API to provide automated translation capabilities inside the translation editor. When a user requests auto-translation for a term or an entire language, call the translation API with the source text and target language, and update the translation record. Additionally, implement a Translation Memory matching lookup that queries past approved translations to suggest similar matches when editing new terms.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Implement Webhooks & Git Sync API

   Develop REST API endpoints and webhook triggers to allow automated import and synchronization with external Git repositories.

   Create secure REST API v2 endpoints and webhook trigger mechanisms in Next.js API routes. Implement an endpoint to receive incoming webhook payloads from GitHub push events, parse updated localization files from the repository tree, upsert terms into the database, and trigger automatic translation updates for new keys. Provide an API log view in the user settings to inspect webhook deliveries and API requests.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for POEditor