Creating a Dream Recorder using React, Vite, and Tolgee 😀🐁

developers, we often seek to create applications that enhance our daily lives. Today, I'm excited to share my experience building a simple workout application using React, Vite, and Tolgee for localization. This app not only generates random workouts but also supports multiple languages, making it accessible to a wider audience.

Here’s a refined and more engaging version of your blog, with additional details about Tolgee and the workout app features.

Why Use Tolgee for Your Workout App?

Tolgee is a powerful, open-source tool that simplifies internationalization (i18n) in web applications. Instead of getting bogged down by the complexity of managing translations, developers can focus on crafting an engaging user experience. With Tolgee, adding new languages to your application becomes smooth and scalable. For this workout app, Tolgee enables easy translation of workout descriptions, making it accessible for users around the world.

Getting Started

Setting Up the Project with Vite

To kick off this project, I created a new React application using Vite, known for its fast hot module replacement and streamlined development process. With Vite’s excellent support for modern JavaScript, setup was quick, enabling me to focus on building the app’s features.

Adding Tolgee

Next, I installed Tolgee and other essential dependencies to get the i18n setup running. Tolgee's integration was simple—no complex configurations, just straightforward code! Tolgee Cloud provides a user-friendly dashboard to manage translations, making it ideal for dynamic multilingual apps.

Initializing Tolgee

I initialized Tolgee with my project configurations, including the API URL and API key. Connecting our app to Tolgee Cloud makes it easy to add or edit translations over time, ensuring that all workout descriptions are consistent and accessible in multiple languages.

Building the Workout Component

The core of our application revolves around the WorkoutComponent.

Setting Up Workout Data

I created an array of workout objects, each including a name, description, and image. This setup keeps the data structured, enabling easy management and future expansion of the workout library.

Adding the Random Workout Feature

To keep things fun and engaging, I implemented a Random Workout Generator. With just a click, users can discover a new workout, bringing an element of surprise and encouraging them to try different exercises.

Designing the User Interface

I aimed for a clean, intuitive UI with a welcoming title, an action button to generate a workout, and a display area showing the selected workout with its image. To improve accessibility, I added a Language Selector powered by Tolgee, letting users choose their preferred language for the workout descriptions with ease.

Running the Application

Once everything was configured, I launched the app using Vite’s development server. With hot module replacement, testing changes in real time was seamless, making the development experience incredibly smooth.

Conclusion

Building this workout app with React, Vite, and Tolgee has been rewarding. Not only did I strengthen my skills in app development, but I also created a tool that can help motivate users to stay active and fit—across languages and borders!

Feel free to check out the project on GitHub. I’d love to hear your thoughts, so don’t hesitate to leave feedback or suggestions in the comments!

Happy coding, and stay fit!