### Installing Hardhat for Smart Contract Development - Bash

Source: https://github.com/hochangjun/guessmydrawing/blob/main/SMART_CONTRACT_SETUP.md

This snippet provides the commands to install Hardhat, a development environment for compiling, deploying, testing, and debugging Ethereum software, and to initialize a new JavaScript project.

```bash
npm install --save-dev hardhat
npx hardhat
# Choose "Create a JavaScript project"
```

--------------------------------

### Setting Up Web Version Development Environment

Source: https://github.com/hochangjun/guessmydrawing/blob/main/README.md

This snippet provides the necessary commands to clone the repository, install project dependencies, create the environment configuration file, and start the development server for the web version of the 'Guess My Drawing' game. It ensures all prerequisites are met for local development.

```Bash
# Clone the repository
git clone https://github.com/hochangjun/guessmydrawing.git
cd guessmydrawing

# Install dependencies
npm install

# Create environment file
cat > .env << EOF
VITE_PRIVY_APP_ID="your_privy_app_id"
VITE_MULTISYNQ_API_KEY="your_multisynq_api_key"
VITE_MULTISYNQ_APP_ID="io.multisynq.guessmydrawing.v2"
EOF

# Start development server
npm run dev
```

--------------------------------

### Starting Development Server - npm

Source: https://github.com/hochangjun/guessmydrawing/blob/main/README.md

This command starts the local development server for the project. It typically enables features like hot-reloading and other development-specific functionalities, allowing for efficient coding and testing during development.

```npm
npm run dev
```

--------------------------------

### Copying Environment Variables - Shell

Source: https://github.com/hochangjun/guessmydrawing/blob/main/CONTRIBUTING.md

This shell command copies the example environment variable file (`.env.example`) to a new `.env` file. The `.env` file is crucial for storing sensitive API keys and configuration specific to your local development setup.

```Shell
cp .env.example .env
```

--------------------------------

### Installing Dependencies - npm

Source: https://github.com/hochangjun/guessmydrawing/blob/main/README.md

This command installs all necessary project dependencies listed in the 'package.json' file. It's a crucial step to ensure all required libraries and modules are available before running or developing the application.

```npm
npm install
```

--------------------------------

### Starting Development Server - npm

Source: https://github.com/hochangjun/guessmydrawing/blob/main/CONTRIBUTING.md

This npm command initiates the local development server for the Guess My Drawing application, typically powered by Vite. It enables live reloading and facilitates efficient local testing during the development process.

```Shell
npm run dev
```

--------------------------------

### Installing Project Dependencies - npm

Source: https://github.com/hochangjun/guessmydrawing/blob/main/CONTRIBUTING.md

This command utilizes npm to install all required Node.js packages and project dependencies specified in the `package.json` file, preparing the Guess My Drawing application for local development.

```Shell
npm install
```

--------------------------------

### Setting Private Key Environment Variable - Bash

Source: https://github.com/hochangjun/guessmydrawing/blob/main/SMART_CONTRACT_SETUP.md

This snippet shows how to set the `PRIVATE_KEY` environment variable in a `.env` file, which is crucial for securely managing sensitive information like wallet private keys for contract deployment.

```bash
PRIVATE_KEY=your_wallet_private_key_here
```

--------------------------------

### Deploying Smart Contract to Monad Testnet - Bash

Source: https://github.com/hochangjun/guessmydrawing/blob/main/SMART_CONTRACT_SETUP.md

This command executes the deployment script for the smart contract using Hardhat, targeting the 'monad-testnet' network. It assumes the `GameEscrow.sol` contract is copied to the Hardhat project and a `deploy.js` script exists.

```bash
npx hardhat run scripts/deploy.js --network monad-testnet
```

--------------------------------

### Setting Up Environment Variables - Shell

Source: https://github.com/hochangjun/guessmydrawing/blob/main/README.md

This command copies the example environment file (.env.example) to create a new '.env' file. This file is used to store sensitive information like API keys, which need to be added manually after copying for the application to function correctly.

```Shell
cp .env.example .env
```

--------------------------------

### Consistent ReactTogether State Key Naming (TypeScript)

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This snippet provides examples of good and bad practices for naming state keys in ReactTogether. Consistent and descriptive naming, often incorporating session-specific identifiers, improves readability and maintainability, while inconsistent or unclear naming can lead to confusion and errors in shared state management.

```TypeScript
// ✅ GOOD: Descriptive, consistent naming
const [publicLobbies, setPublicLobbies] = useStateTogether('publicLobbies', {});
const [gameState, setGameState] = useStateTogether(`gameState_${sessionCode}`, defaultGameState);
const [players, setPlayers] = useStateTogether(`players_${sessionCode}`, {});

// ❌ BAD: Inconsistent or unclear naming
const [data1, setData1] = useStateTogether('data', {});
const [stuff, setStuff] = useStateTogether('randomKey123', {});
```

--------------------------------

### Configuring Hardhat for Monad Testnet - JavaScript

Source: https://github.com/hochangjun/guessmydrawing/blob/main/SMART_CONTRACT_SETUP.md

This JavaScript configuration for Hardhat sets up the project to use Solidity version 0.8.19 and defines a network named 'monad-testnet' with its RPC URL, chain ID, and account for deployment, using a private key from environment variables.

```javascript
require("@nomiclabs/hardhat-ethers");
require("dotenv").config();

module.exports = {
  solidity: "0.8.19",
  networks: {
    "monad-testnet": {
      url: "https://testnet-rpc.monad.xyz",
      accounts: [process.env.PRIVATE_KEY],
      chainId: 10143
    }
  }
};
```

--------------------------------

### Cloning the Repository - Git

Source: https://github.com/hochangjun/guessmydrawing/blob/main/README.md

This command clones the 'guessmydrawing' project repository from GitHub to your local machine. Replace 'YOUR_USERNAME' with your actual GitHub username or the project's owner's username to get the source code.

```Git
git clone https://github.com/YOUR_USERNAME/guessmydrawing.git
```

--------------------------------

### Updating Frontend with Deployed Contract Address - TypeScript

Source: https://github.com/hochangjun/guessmydrawing/blob/main/SMART_CONTRACT_SETUP.md

This TypeScript snippet demonstrates how to update the frontend application with the newly deployed smart contract's address. This constant is used by the frontend to interact with the deployed contract on the blockchain.

```typescript
export const GAME_ESCROW_ADDRESS = "0xYOUR_DEPLOYED_CONTRACT_ADDRESS";
```

--------------------------------

### Searching for localStorage Usage in Shell

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This shell command uses `grep` to recursively search for all occurrences of the string 'localStorage' within the 'src/' directory. This helps identify existing `localStorage` implementations that might conflict with `ReactTogether`.

```Shell
grep -r "localStorage" src/
```

--------------------------------

### Debugging ReactTogether State Keys (TypeScript)

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This snippet provides a debugging technique for ReactTogether applications, demonstrating how to log the state key and its current value to the console. This helps verify that the correct state key is being used and to inspect the current state, aiding in troubleshooting synchronization issues.

```TypeScript
// Add debug logging to see what keys are being used
console.log('State key:', `gameState_${sessionCode}`);
console.log('Current state:', gameState);
```

--------------------------------

### Verifying ReactTogether Session Parameters (TypeScript)

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This snippet shows how to define and verify consistent session parameters for ReactTogether. Ensuring all components use the same `appId`, `apiKey`, `name`, and `password` is crucial for maintaining a single, unified shared state session across all connected clients.

```TypeScript
// Make sure all components use the same session parameters
const sessionParams = {
  appId: 'your-app-id',
  apiKey: 'your-api-key',
  name: 'consistent-session-name',
  password: 'consistent-password'
};
```

--------------------------------

### Removing localStorage Operations (Bash)

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This snippet suggests a debugging step to remove all `localStorage` operations from the codebase. This is a crucial step when troubleshooting state desynchronization issues in ReactTogether applications, as `localStorage` can interfere with the shared state mechanism.

```Bash
```bash
```

--------------------------------

### Direct ReactTogether State Updates vs. Global Functions (TypeScript)

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This snippet contrasts direct state updates using `setSharedData` with an anti-pattern involving complex global functions and custom events for state modification in ReactTogether. Direct state updates are the recommended approach for simplicity, clarity, and efficient synchronization of shared state across clients.

```TypeScript
// ❌ BAD: Complex global function system
(window as any).updateSharedData = (data) => { /* complex logic */ };
window.dispatchEvent(new CustomEvent('dataUpdated', { detail: data }));

// ✅ GOOD: Direct state updates
setSharedData(prev => ({ ...prev, ...newData }));
```

--------------------------------

### Overwriting Shared State (Bad Practice) in TypeScript

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This TypeScript snippet demonstrates an incorrect way to update shared state. Directly assigning `localData` to `setSharedData` overwrites the existing shared state, which can lead to data inconsistencies and conflicts, especially when `ReactTogether` expects merges.

```TypeScript
// ❌ BAD: This overwrites shared state
setSharedData(localData);
```

--------------------------------

### Merging with Shared State (Good Practice) in TypeScript

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This TypeScript snippet illustrates the recommended approach for updating shared state. It uses a functional update to `setSharedData`, merging `newData` with the `prev`ious state. This ensures that existing shared data is preserved and updated incrementally, aligning with `ReactTogether`'s state management paradigm.

```TypeScript
// ✅ GOOD: This merges with shared state
setSharedData(prev => ({ ...prev, ...newData }));
```

--------------------------------

### ReactTogether Global vs. Session-Specific State (TypeScript)

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This snippet differentiates between global, session-specific, and user-specific state management using `useStateTogether` in ReactTogether. Global state is shared across the entire application, session-specific state is unique to a particular game or lobby, and user-specific state is unique to an individual user, allowing for flexible and granular state synchronization.

```TypeScript
// Global state (shared across entire app)
const [publicLobbies, setPublicLobbies] = useStateTogether('publicLobbies', {});

// Session-specific state (unique per game/lobby)
const [gameState, setGameState] = useStateTogether(`gameState_${sessionCode}`, {});
const [players, setPlayers] = useStateTogether(`players_${sessionCode}`, {});

// User-specific state (unique per user)
const [userState, setUserState] = useStateTogether(`user_${walletAddress}`, {});
```

--------------------------------

### Correct ReactTogether State Management (TypeScript)

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This snippet illustrates the correct way to manage shared state using `useStateTogether` in ReactTogether. It avoids `localStorage` entirely, ensuring that all state updates are directly applied to the shared state, making them immediately visible to all connected users. An optional cleanup mechanism is included to periodically remove old data from the shared state.

```TypeScript
// ✅ GOOD: Pure ReactTogether state management
const [sharedData, setSharedData] = useStateTogether('sharedKey', {});

// No localStorage operations needed!
const updateData = (newData) => {
  // Direct update to shared state - visible to ALL users immediately
  setSharedData(prev => ({
    ...prev,
    ...newData
  }));
};

// Optional: Clean up old data periodically
useEffect(() => {
  const cleanup = setInterval(() => {
    const now = Date.now();
    setSharedData(prev => {
      const updated = { ...prev };
      Object.keys(updated).forEach(key => {
        if (updated[key].createdAt < now - 30 * 60 * 1000) {
          delete updated[key]; // Remove items older than 30 minutes
        }
      });
      return updated;
    });
  }, 60000); // Check every minute

  return () => clearInterval(cleanup);
}, [setSharedData]);
```

--------------------------------

### Incorrect ReactTogether State Management with localStorage (TypeScript)

Source: https://github.com/hochangjun/guessmydrawing/blob/main/REACTTOGETHER_TROUBLESHOOTING.md

This snippet demonstrates an incorrect approach to state management in ReactTogether applications, where `localStorage` is mixed with `useStateTogether`. This leads to state desynchronization because `localStorage` is user-specific and not shared across connected clients, causing shared state to be overwritten with local data or updates to be visible only to the current user.

```TypeScript
// ❌ BAD: Mixing localStorage with ReactTogether
const [sharedData, setSharedData] = useStateTogether('sharedKey', {});

useEffect(() => {
  // Loading from localStorage - NOT shared between users!
  const localData = JSON.parse(localStorage.getItem('myData') || '{}');
  setSharedData(localData); // This overwrites shared state with local data
}, []);

const updateData = (newData) => {
  // Saving to localStorage - only visible to current user!
  localStorage.setItem('myData', JSON.stringify(newData));
  setSharedData(newData); // This might work but creates inconsistencies
};
```

--------------------------------

### Building Web Version for Production

Source: https://github.com/hochangjun/guessmydrawing/blob/main/README.md

This command compiles and optimizes the 'Guess My Drawing' web application for production deployment. It prepares the frontend assets for efficient serving in a live environment.

```Bash
npm run build
```

--------------------------------

### Cloning Guess My Drawing Repository - Git

Source: https://github.com/hochangjun/guessmydrawing/blob/main/CONTRIBUTING.md

This Git command is used to clone your forked Guess My Drawing repository from GitHub to your local machine, initiating your development environment. Remember to replace `YOUR_USERNAME` with your actual GitHub username.

```Shell
git clone https://github.com/YOUR_USERNAME/guessmydrawing.git
```

--------------------------------

### Creating a New Feature Branch - Git

Source: https://github.com/hochangjun/guessmydrawing/blob/main/CONTRIBUTING.md

This Git command creates a new branch with the specified name (e.g., `feature/your-feature-name`) and immediately switches your working directory to it. This practice is essential for isolating your changes for a new feature or bug fix before submitting a pull request.

```Shell
git checkout -b feature/your-feature-name
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.