"Zenith" – A Serene Meditation App with React, Tolgee, and Tailwind CSS

In this post, I'm excited to share Zenith, a meditation app designed to help users find calm and focus with a selection of soothing sounds, a user-friendly interface, and support for multiple languages. I’ll walk through the app’s core features, the tech stack, how to set it up and also integration of tolgee in react.

DEMO

Features

• Soothing Sounds: Users can choose from a variety of calming sounds tailored to enhance meditation sessions.
• Localization: Tolgee’s integration allows users worldwide to experience the app in their native language.
• Responsive Design: Tailwind CSS enables a fluid, mobile-friendly experience across devices.
• User-Friendly Interface: The simple layout prioritizes accessibility and ease of navigation.

Tech Stack

• React: The app’s frontend uses React, ideal for creating a smooth, interactive UI.
• Tolgee: Tolgee simplifies multilingual support, making it easy to offer localization for a global audience.
• Tailwind CSS: Tailwind helps create a clean, responsive design rapidly with its utility-first approach.

Getting Started with Zenith

Interested in trying it out? Here’s how to get the app running on your machine.

Clone the Repository:

git clone https://github.com/tolgee/tolgee-platform.git
cd demos/meditation-app

Install Dependencies:

npm install

Run the App:

npm run dev

Then, visit http://localhost:5173 in your browser to explore the app.

Using Zenith

• Select your preferred language using the language toggle.
• Browse through the available soothing sounds and click to play.
• Use the timer to set the duration of your session.
• Enjoy your meditation session.

Integration of Tolgee in React

Documentaion

What is Tolgee?

Tolgee is an open-source localization and translation platform that integrates smoothly with various frameworks, including React. It provides an in-app translation tool that allows developers to create multilingual applications quickly and manage translations with ease.

How to Integrate Tolgee into a React Application

Tolgee simplifies localization by offering an easy setup and powerful tools to manage translations directly within the app interface. Here’s a step-by-step guide to integrating Tolgee with a React application and using it to create a multilingual experience.

Step 1: Install Tolgee

First, add the Tolgee library to your React project. Tolgee offers both NPM and Yarn packages, so choose whichever works best for you.

npm install @tolgee/react
# or
yarn add @tolgee/react

Step 2: Set Up Tolgee in Your Application

Now, initialize Tolgee in your app. Start by importing the necessary components from the Tolgee library, then wrap your app in Tolgee's TolgeeProvider. This provider enables Tolgee’s translation and localization features throughout your app.

In your main app file (e.g., App.js or index.js), set up the TolgeeProvider like this:

import { TolgeeProvider } from "@tolgee/react";
import { DevTools } from "@tolgee/react";
import App from "./App";

const tolgee = Tolgee({
  apiKey: process.env.REACT_APP_TOLGEE_API_KEY,
  apiUrl: "https://app.tolgee.io",
  defaultLanguage: "en",
});

const Root = () => (
  <TolgeeProvider tolgee={tolgee}>
    <DevTools /> {/* Enables in-context editing for translations */}
    <App />
  </TolgeeProvider>
);

export default Root;

Step 3: Adding Translations

Tolgee uses a unique key for each translation, which can be referenced throughout the app. You can manage your translations through the Tolgee platform or directly within your code.

Example of Adding Text for Localization

Use the T component or useTranslate hook from Tolgee to define text that needs translation. Here’s how you can use these in your components:

Using the <T> Component

import { T } from "@tolgee/react";

function Welcome() {
  return <h1><T keyName="welcome_message">Welcome to Zenith</T></h1>;
}

In the Tolgee platform, you’d map the key welcome_message to its translations, like “Welcome to Zenith” in English, and other equivalent phrases in different languages.

Using the useTranslate Hook

For more complex scenarios, the useTranslate hook is helpful.

import { useTranslate } from "@tolgee/react";

function Welcome() {
  const { t } = useTranslate();

  return <h1>{t("welcome_message", "Welcome to Zenith")}</h1>;
}

Step 4: In-Context Editing with Tolgee DevTools

Tolgee’s in-context editing is a major advantage—it allows you to edit translations directly within your app. With DevTools enabled, you can click on any text to edit its translation in real-time, streamlining the translation workflow.

To access DevTools, ensure you’ve wrapped the app in <DevTools /> (as shown above) and are in development mode. This lets you adjust or add translations without going back and forth to the Tolgee platform.

Wrapping Up

Zenith brings together soothing sounds, a user-friendly interface, and multilingual support to provide a truly accessible meditation experience. By leveraging tools like React for the frontend, Tailwind CSS for responsive design, and Tolgee for seamless localization, Zenith is crafted to help users find peace across languages and devices.

Whether you’re a developer looking to learn more about localization or simply someone interested in meditation apps, I hope this post has been insightful. Feel free to try out the DEMO and see how Zenith can help you find your own calm.

Happy coding, and happy meditating!