Translation Tool

I wrote a complex over-engineered way to translate the React applications. It was originally supposed to be simple JSON-editor but due to formatting issues I decided to use TypeScript files directly.

Problem Definition

There are many ways to keep the content of your applications such as:

1. embedding text directly into React components,
2. using tools like react-i18next or react-intl to handle JSON files,
3. fetch the data from CMS,
4. keep the strings in database.

I did not quite like the solutions, so I wanted to take different approach to commit changes to the source code itself like those git-based CMS. So I designed the structure of the translation files, implemented a GUI to modify them, and added Git integration to commit the changes.

Technical Details

The application is written in Next.js (React). The live preview requires the user to run the application on their own machine. As the developers can write the TypeScript files manually, the docstrings are used to keep notes and links to the previews.

Conclusion

Eventually, I realized the issues of this approach. It is difficult to deploy, you need to run the frontend of the application in development mode which could expose sensitive details when it is accessible from internet. This is not a big issue since, the applications can be containerized and the views can be protected using e.g. basic authentication.

Another issue is that, the translation format is non-standard and well-known. I had written a custom hook useTranslation(content) which feels rather inefficient. The good side is that the content can be freely and formatted using JSX.