Introduction

Hello, thank you for reading the second post about Localizard, a translations platform I am creating for the Planetscale x Hashnode Hackathon of July 2022. More info about the project can be found in the first post.

Now that the basic functionality is in place, I wanted to spend some time on the design of the website itself. I am not a designer, and in fact I struggle with creating traditionally good-looking pages. However, many tools today help us more-tech-oriented people in obtaining an acceptable result. More on this later in the post.

How the system works

I’d like to give you some insights into how the platform will be used and how it can help you build a coherent set of translations.

First, you define some labels. Labels are the individual conceptual strings that are displayed in the website or app. Each label has a key (unique to the project) that is conventionally structured with nested namespaces. Optionally, you can define a description for the label. This is useful when providing context around the use of the label in your product.

Second, you define the locales supported in your product. These locales are commonly represented as two-letters for the language or four letters for a combination of language and country.

Once you have defined both labels and locales, you can define translations for the matrix label/locale. These represent the actual strings that will be displayed in the product.

The translations you defined will now be available through Localizard’s REST API. Each project will automatically generate an API key that you must use to authenticate the request. You’ll find the key for your project in the dedicated section in your project’s page. If you need to access the translations from a client at runtime and cannot embed a key you can turn your project into a public one. Public projects can be accessed without providing any kind of security credential (but, of course, not modified).

Redesign

Since Localizard uses Tailwind to manage styles, I thought it would be nice to try TailwindUI. I have purchased the all-access pack and started choosing different components and page templates.

Of course, with this being an Hackathon project, I don’t have many pages to style, but I am happy about the current results and most importantly the visual coherence of the various pages.

These are some of the pages in the dashboard:

Of course, you can already create an account on Localizard and check it out!

Next up

I always appreciate when projects can be used in “meta” ways. So I thought about providing Localizard in different languages, and of course using Localizard itself to store the translations. In the coming days I’ll start coding the functionality and then give you all an update through a new post.

Thank you for reading!