Welcome to the Roll-Dice Project! This open-source web application, powered by the Tolgee
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.
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 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.
For the complete source code, visit my GitHub
, and don't forget to star the repo!Follow me on X
Top comments (1)
Great article, Thanks a lot for contributing to Tolgee with this demo!