This is a small experiment to see how we can use Sanity to manage translations for a React application.
The overarching goal is to simplify the handling of language, making less work for the content team, the developers, and ultimately provide a seamless experience for the user. See the user stories for more details.
Here is a rough diagram of how this should work:
flowchart TD
RequestDocument[Client requests document] --> LookForTranslation{Does an up to date translation exist?}
subgraph Sanity
LookForTranslation -->|Yes| ReturnDocument[Serve it back to the client]
LookForTranslation -->|No| TranslateContent[Translate the content]
TranslateContent --> UpdateDocument[Update the Sanity document]
UpdateDocument --> ReturnDocument[Serve it back to the client]
end
📝 As a content manager, I want to be able to create a document in Sanity with a title and a body written in US English.✅🌐 As a content manager, I want to know that when a user device requests a document in te reo Māori, that the document will automatically be translated for them.✅✏️ As a content manager, I want to be able to manually edit translated content.✅:earth*asia: *(stretch)_ As a content manager, I want to be able to update the list of languages that a document can be translated into.✅🤖 (stretch) As a content manager, I want to be able to manually trigger the AI-based translation of a document.✅
📖 As a user, I want to be able to view a document in my language. If my language is not yet supported, I want to see the document in English.✅
🛠️ As a developer, I want to be able to request a document from Sanity without having to worry about what language it is in. ✅- :hammer*and_wrench: *(stretch)_ As a developer, I want to be able to plug this functionality into an existing Sanity project.
:hammer*and_wrench: *(stretch)_ As a developer, I want to be able to replace the existing translation layer with my own implementation.✅
The application follows a simple structure, comprising the following parts:
- A React Web application: Used to display content.
- A RESTful Node.js server: Responsible for requesting content from Sanity or routing through the translation layer when needed.
- A translation layer: Utilises OpenAI to translate content.
- Sanity studio: Manages the content.
- Clone the repository
- Install dependencies
- Web (see apps/web/README.md)
- Studio (see apps/studio/README.md)
- Run the layers you need:
- Web (
cd web && pnpm dev
): http://localhost:3000 - Studio (
cd studio && pnpm dev
): http://localhost:3333
- Web (
- Have fun!