How to vibe codeTransifex

Prerequisites

• Node.jsfree

  Runtime environment for Next.js and backend TypeScript execution.

• GitHubfree

  Source control and webhook destination for repository file sync.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file SaaS architectures and managing database schemas.

• Cursor

  Ideal for fine-tuning complex React UI components in the translation editor dashboard.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js application with TypeScript, Tailwind CSS, and Turso SQLite via Drizzle ORM, setting up models for organizations, projects, languages, source strings, translations, and glossaries.

   Scaffold a new Next.js 16 project with Tailwind CSS 4 and TypeScript. Set up Drizzle ORM configured for Turso (SQLite over HTTP). Create a relational database schema for multi-tenant localization management with the following tables: `projects` (id, name, slug, owner_id), `languages` (id, project_id, code, name), `source_strings` (id, project_id, key, string_hash, context, file_path), `translations` (id, string_id, language_id, content, status [untranslated, translated, reviewed], updated_at), `glossaries` (id, project_id, term, translation, part_of_speech), and `translation_memory` (id, source_text, target_text, source_lang, target_lang). Include proper foreign key constraints, indexes on string hashes, and migration scripts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Workspace Management

   Integrate better-auth for email/password authentication and organization team scoping.

   Install and configure `better-auth` in the Next.js project to support email/password authentication and user session management. Create sign-in, sign-up, and account settings pages. Implement middleware to protect dashboard routes under `/dashboard` and ensure users can only access projects belonging to their authenticated tenant organization. Set up the necessary database tables via better-auth migration utilities.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03File Parser & Importer Engine

   Build backend parsers to ingest standard localization formats (JSON, .po, and YAML) and populate source strings.

   Build a robust multi-format localization file parser utility in TypeScript that accepts uploaded files (JSON, flat key-value JSON, .po gettext files, and YAML). The parser must extract key paths, string values, and optional context comments, handling nested objects recursively. Create an API endpoint (`POST /api/projects/[id]/import`) that validates uploaded file payloads, upserts entries into the `source_strings` table, and automatically instantiates missing translation placeholder rows for all active target languages configured in the project.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Translation Editor Dashboard UI

   Develop a React-based translation management grid with filtering, string states, and inline editing.

   Create a responsive translation management dashboard page in Next.js (`/dashboard/projects/[id]`). Build a data grid component displaying source strings alongside target language columns. Each row must show source text, target translation input with live auto-save (debounced API call to `PUT /api/translations`), status badges (Untranslated, Translated, Reviewed), and character counters. Add filter controls by language, status, and search query string, plus a sidebar listing project statistics and completion percentages.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Translation & Glossary Integration

   Integrate the Anthropic API using the Vercel AI SDK to automatically fill un-translated strings while respecting project glossaries.

   Implement an AI translation feature using the Vercel AI SDK and Anthropic API. Create an API route (`POST /api/projects/[id]/translate-ai`) that accepts a target language and batch of source string IDs. The background function must fetch active glossary terms and translation memory matches for the project, construct a strict prompt instructing Claude to translate the strings maintaining brand voice and glossary adherence, and update the `translations` table with the generated output and a 'translated' status flag. Add a trigger button in the dashboard UI for 'Translate with AI'.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Over-The-Air (OTA) Delivery CDS & Client SDK

   Build an edge-cached content delivery endpoint that serves compiled translation dictionaries to client applications instantly.

   Build an Over-The-Air (OTA) translation delivery API route (`GET /api/ota/[project_id]/[language_code]`) optimized for edge caching. The endpoint must query published translations for the specified project and language, returning a clean JSON dictionary mapping string keys to translated values. Add API token authentication header verification (`X-Project-Token`). Provide a lightweight companion JavaScript client snippet and fetch helper that applications can use to pull and cache translations dynamically at runtime without rebuilding.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Transifex