Step 1 of 6
Integrate i18n library
Add a robust internationalization library to provide translation support.
The app is a React project using JavaScript/JSX. We will use i18next and react-i18next.
1. Add i18next and react-i18next as dependencies using the project's package manager (e.g., npm install i18next react-i18next). 2. In the src directory, create a file named i18n.js. 3. In i18n.js, import i18next, initReactI18next, and set up i18next.init with: language: 'en', fallbackLng: 'en', resources: {}, and use initReactI18next. 4. Export the configured i18next instance (or simply run the init code). 5. Ensure i18n.js is imported at the top level of the app (e.g., in index.js) so the configuration runs before any component renders. Do not include placeholder comments; provide real, executable code.
Expected after this step
i18n.js file exists, i18next is listed in package.json, and the file initializes i18next with default language 'en' and fallback.
Should not happen
- ✕AI inserts placeholder strings like "TODO" instead of real translations
- ✕AI generates component code missing required imports or the useTranslation hook
- ✕AI forgets to call localStorage.setItem when changing language
- ✕AI leaves hardcoded UI text that should be translated
Verify before continuing
Do not move on until every check is true. The complete button stays locked until then.
Do not continue if…
- !AI inserts placeholder strings like "TODO" instead of real translations
- !AI generates component code missing required imports or the useTranslation hook
- !AI forgets to call localStorage.setItem when changing language
- !AI leaves hardcoded UI text that should be translated
- !AI provides only mock UI screenshots rather than executable JSX/JS code
If the AI messes this up
Use this when the AI fakes progress or breaks the feature. It forces a real fix.
The AI omitted the real i18next initialization or left placeholder comments. Provide a complete src/i18n.js with proper imports, i18next.init call configuring language 'en' and fallbackLng, and an export or side‑effect import in index.js.