DEV Community

Cover image for Starting the Roll-Dice Project with Vite
Akash Parmar
Akash Parmar

Posted on

Starting the Roll-Dice Project with Vite

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.

favicon 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

cd roll-dice
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

favicon 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:

First Screen

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.

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

Main Component

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

App Component

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

NavBar Component

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

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

Game Screen Component

Game Screen Component

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

Video Modal Component

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

  1. Texture Loading: Uses the useLoader hook to load textures for the dice faces.
  2. Rolling Logic: Begins to roll when triggered, with dynamic textures updating based on the roll result.
  3. 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.

Roll Dice Component

For the complete source code, visit my GitHub

Akash-cloud001 (Akash Parmar) · GitHub

Passionate Developer. Akash-cloud001 has 19 repositories available. Follow their code on GitHub.

favicon github.com
, and don't forget to star the repo!

Follow me on X

Top comments (1)

Collapse
 
marketa_c profile image
Marketa Cizmar

Great article, Thanks a lot for contributing to Tolgee with this demo!