Starting the Roll-Dice Project with Vite

#tolgee #react #tailwindcss #reactthreefiber

Welcome to the Roll-Dice Project! This open-source web application, powered by the Tolgee

Painless localization | Tolgee

Open-source localization platform developers enjoy working with. Set up in seconds & speed up the translation process. Sign up for free. No credit card required.

tolgee.io

platform, is designed to simulate a dice roll and generate spontaneous workout routines. The app supports multiple languages: English, Hindi, German, and French. Let’s get started!

Step 1: Create the Project Directory

First, navigate to your desired (>demos/) location and create a new directory for your project:

mkdir roll-dice
cd roll-dice

Step 2: Set Up the Vite React App

Next, create a new Vite project using the following command:

npm create vite@latest roll-dice --template react

This sets up a new Vite project with a React template. Navigate into the newly created directory:

cd roll-dice

Step 3: Install Dependencies

Install the necessary dependencies, including React, Material UI, react-three-fiber, and Tolgee:

npm install @mui/material @emotion/react @emotion/styled @react-three/fiber tolgee

Step 4: Set Up Tailwind CSS

To add Tailwind CSS, install it along with its peer dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.js file to specify the paths to your template using their documentation.

Install Tailwind CSS with Vite - Tailwind CSS

Setting up Tailwind CSS in a Vite project.

tailwindcss.com

Clean up the default files in the src directory:

Delete the contents of App.jsx, index.css, and App.css.
Create a new directory called components:

Step 5: Set Up Tolgee

After installing the dependencies, create an app in Tolgee:

Sign Up or Log In: Visit the Tolgee website and sign up or log in.
Create Your App: Once logged in, create a new app named Roll Dice.
Generate Access Tokens: Create a Personal Access Token and Project API Key. Refer to the Tolgee

Installation | Tolgee

Tolgee enables you to implement localization in your React application with ease. You can integrate Tolgee in your React application using Tolgee's SDK for React. To use this SDK, start by installing Tolgee for React.

tolgee.io

for detailed instructions.
To integrate Tolgee, import the necessary libraries in your main.jsx. Create a Tolgee instance and render your app within a TolgeeProvider, ensuring smooth user experience while fetching translations.

Set Up Your App:

App.jsx, manage the application's main functionality, toggling between components like Header, GameScreen, and NavBar, and utilizing the useTranslate hook for translations.
Navbar and Language Selector Component

**NavBar **component features a logo for refreshing the page and integrates the **LanguageSelector **for switching languages easily.

**GameScreen **Component Overview
The GameScreen component is the interactive area, allowing users to roll dice and generate a workout routine. Key features include:

Dice Rolling Logic: The handleDiceRoll function randomly selects an exercise from a predefined list.
Exercise Display: Selected exercises are displayed, each with a tutorial link.
Restart Functionality: A restart button allows users to reset the game.

VideoModal Component
The VideoModal displays tutorial videos for selected exercises in a responsive pop-up, enhancing the learning experience.

RollDice Component Overview
The RollDice component provides a 3D dice-rolling simulation using react-three-fiber. It features:

Texture Loading: Uses the useLoader hook to load textures for the dice faces.
Rolling Logic: Begins to roll when triggered, with dynamic textures updating based on the roll result.
Animation Handling: Uses useFrame to animate the dice and settle into its final position.

This component provides an engaging and interactive experience, combining 3D rendering with responsive animations.