Add a new language

In order for the new language to work in the entire application, you need to add it to the mobile application, the web application and the server.

Add language to server

There are data that need to be translated in the server side of the application, like the categories and the notifications content.

In order to add a new language to the server, you need to open a terminal in the root of the server and run the following command (make sure you stopped the server before running this command):

npm run add:language <LANGUAGE_CODE>

Replace <LANGUAGE_CODE> with the code of the language you want to add. For example, if you want to add French, you would run:

npm run add:language fr

This will automatically create a seeding file and the categories and the notifications content will be automatically translated the next time you run the server.

You can see an example in the following video.

Add a language to the web application

1. Make sure you have a SVG image representing the flag of the new language. After you have the SVG image, you need to add it to the public/assets/svg/flags folder in the web application.

2. Make sure you take one file from the src/app/i18n/locales and translate it into the language you are trying to add. (You can use Chat GPT in order to translate it faster). After you have the translation file, use the language short code as the file name. For example, if you are adding French, you would create a file called fr.json. Add it in the src/app/i18n/locales folder.

3. Open the src/app/i18n/settings.ts file and add your language short code to the languages available array.

4. Open the src/constants/languages.ts file and add the new language to the LANGUAGES_META object. Make sure to respect the structure of the object. You will need to add the language icon name, so make sure you are setting the correct one.
   

That’s it! You have successfully added a new language to the web application.

Add a language to the mobile application

1. Make sure you have a SVG image representing the flag of the new language. After you have the SVG image, you need to add it to the assets/icons/svg/flags folder in the Flutter application.

2. Make sure you take one file from the lib/lang and translate it into the language you are trying to add. (You can use Chat GPT in order to translate it faster). After you have the translation file, use the language short code as the file name. For example, if you are adding French, you would create a file called fr.json. Add it in the lib/lang folder.

You can take the translation file from the web application if you already created one, but take into account that inside the web application, the interpolations are done using {{ and }}, while in the mobile application, the interpolations are done using { and }.

3. Open the lib/utils/constants.dart file and add your new language to the LANGUAGES list. Make sure to respect the structure of the object.

That’s it! You have successfully added a new language to the mobile application.