Building a Fun Workout App with React, Vite, and Tolgee

As 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.

Why Use Tolgee?

Tolgee is an open-source tool designed for internationalization (i18n) in web applications. It simplifies the management of translations, allowing developers to focus on creating a great user experience rather than getting bogged down by the intricacies of localization. By integrating Tolgee, we can easily translate our workout descriptions into different languages.

Getting Started

Setting Up the Project

To kick things off, I created a new React project using Vite, which provides an exceptional development experience with fast hot module replacement. After setting up the project, I added the necessary dependencies, including Tolgee.

Initializing Tolgee

In the application, I initialized Tolgee with the required configurations, including the API URL and API key. This step is crucial as it allows us to connect our app to the Tolgee Cloud for translations.

Creating the Workout Component

The core of the application is the WorkoutComponent.

Defining Workout Data

I defined an array of workout objects, each containing a name, description, and image. This structured approach makes it easy to manage and display workouts within the app.

Generating a Random Workout

To engage users, I implemented a feature that generates a random workout when they click a button. This functionality adds an element of surprise and encourages users to try different workouts.

Building the User Interface

The user interface is designed to be clean and intuitive. It includes a welcoming title, a button to generate workouts, and displays the selected workout along with its image. To enhance accessibility, I also integrated a language selector, allowing users to choose their preferred language for workout descriptions.

Running the Application

Once everything was set up, running the application was straightforward. By using Vite’s development server, I could easily view and interact with the app in my browser.

Conclusion

Creating a workout application with React, Vite, and Tolgee has been an enriching experience. Not only did I improve my development skills, but I also built a tool that could inspire users to stay active and fit.

Feel free to explore the project on GitHub and contribute or give it a try! If you have any questions or suggestions, I’d love to hear them in the comments below.

Happy coding, and stay fit!