nico.fyi

iTheorie.ch Landing Page

November 10, 2018 in works

iTheorie is a landing page for the company I’m working at right now. It ‘s created using Gatsbyjs just like this blog. This landing page showcases the company’s apps.

One challenging thing about this project is the multi languages requirement. Since there are 4 major languages (English, German, French, and Italian) being used in Switzerland, the landing page needs to support those languages. The complication comes from the fact that some products (apps) doesn’t support all 4 languages. So we need to show only the languages that are supported by each of the apps. We overcome this challenge by dynamically generating multiple pages for an app with different languages in gatsby-node.js file.

We are not using 3rd party React components for I18n because we think they are overkill. We use a simple JS file that contains a dictionary of words as follows

en: {
      siteName: "iTheory",
      title: "iTheory Premium",
      tagline: "Fast Driving License",
},
de: {
      siteName: "iTheorie",
      title: "iTheorie Premium",
      tagline: "Schnell zum Führerschein",
}

Then we pass this dictionary to the components that need them along with currently selected language.

For integration testing, we use Cypress.io.

Tech Stack


Nico Prananta

Articles, drawings, and codes by Nico Prananta, a software developer (iOS and web) and digital artist (for fun!) in Basel, Switzerland. I'm on Twitter.

RSS Feeds