How to vibe codeCrowdin

Prerequisites

• Node.jsfree

  Runtime for running Next.js and backend TypeScript services

• GitHubfree

  Repository hosting and webhook target for source file synchronization

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding complex multi-file parsers and backend logic directly in your terminal

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, Drizzle ORM, and Neon Postgres, establishing core tables for projects, source strings, and translations.

   Initialize a new Next.js 16 project with TypeScript and Tailwind CSS v4. Set up Drizzle ORM configured for a Neon Postgres connection. Create a comprehensive database schema in `db/schema.ts` with tables for `projects` (id, name, target_languages), `files` (id, projectId, name, path), `source_strings` (id, fileId, key, text, context), `translations` (id, stringId, language, text, status), and `translation_memory` (id, sourceText, translatedText, sourceLang, targetLang). Add proper foreign key constraints, indexes on frequently queried fields like stringId and language, and write migration scripts using Drizzle Kit. Ensure the project structure cleanly separates components, server actions, and database utilities.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Workspace Setup

   Integrate better-auth for secure user authentication and project organization management.

   Configure `better-auth` in the Next.js application supporting email/password sign-in and session management tied to our Neon Postgres database. Create the necessary auth API route handler at `app/api/auth/[...all]/route.ts`. Build a clean dashboard layout with sidebar navigation, user profile management, and a project creation modal that lets users initialize a new localization project specifying source and target languages. Protect dashboard routes so unauthenticated users are redirected to sign-in.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03File Parsing Engine (JSON & YAML)

   Build a modular parser service capable of ingesting localization file formats (JSON and YAML) and extracting translatable strings.

   Create a file parsing engine in `lib/parsers/` that supports nested JSON and YAML files. Implement functions to parse uploaded source files into flat key-value string records with dot-notation keys (e.g., `auth.login.title`), and a reverse serializer function that takes translated records and reconstructs the original nested file structure losslessly. Write robust error handling for malformed syntax and unit tests validating round-trip serialization for complex nested dictionaries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Online Translation Editor Interface

   Construct a feature-rich translation workbench UI resembling a CAT tool with segment filtering and status indicators.

   Build the online translation editor page at `app/projects/[id]/editor/page.tsx`. Implement a split-pane or table layout showing source strings on the left and target language translation inputs on the right. Add filtering controls by translation status (approved, translated, unapproved), language switcher dropdowns, and inline editing with instant auto-save via server actions. Display metadata like context, character limits, and visual indicators for translation completion progress.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Pre-translation & Translation Memory

   Integrate OpenAI API for automated pre-translation and implement a translation memory lookup mechanism.

   Implement an AI pre-translation service in `lib/ai.ts` using the OpenAI API to translate unapproved source strings into target languages using project context and glossaries. Create a Translation Memory (TM) lookup function that searches historical translations using trigram or exact matching to suggest previous translations when identical source strings are encountered. Add UI buttons in the project dashboard to trigger batch AI pre-translation with real-time progress feedback.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06GitHub Integration & Webhook Sync

   Build a GitHub webhook receiver that automatically syncs source files from a connected repository.

   Create a GitHub webhook endpoint at `app/api/webhooks/github/route.ts` that handles `push` events. When code is pushed to a repository branch, verify webhook signatures, fetch updated localization files (like JSON/YAML) using the GitHub REST API via an Octokit client, parse the new strings, and upsert them into the database without duplicating existing approved translations. Provide a settings page in the UI to link a GitHub repository and configure webhook secrets.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Crowdin