# Setup (/docs/cookbook/reaction-time-game/setup) import { Tabs, Tab } from 'fumadocs-ui/components/tabs'; import { Callout } from 'fumadocs-ui/components/callout'; ## Project Setup ### Create a New Next.js Project First, create a new Next.js application with TypeScript: ```bash npx create-next-app@latest reaction-time-game ``` ```bash yarn create next-app reaction-time-game ``` ```bash pnpm create next-app reaction-time-game ``` ```bash bun create next-app reaction-time-game ``` When prompted, select these options: * Use recommended Next.js defaults: **No, customize settings** * TypeScript: **Yes** * Linter: **None** * React Compiler: **Yes** * Tailwind CSS: **Yes** * `src/` directory: **Yes** * App Router: **Yes** * Customize import alias: **No** If you've completed another tutorial, you can select **No, reuse previous settings** to skip configuration. Navigate into your project: ```bash cd reaction-time-game ``` ### Install Dependencies Install the required packages for blockchain integration: ```bash npm install viem shreds lucide-react ``` ```bash yarn add viem shreds lucide-react ``` ```bash pnpm add viem shreds lucide-react ``` ```bash bun add viem shreds lucide-react ``` **Package breakdown:** * `viem` - Lightweight Ethereum client library for transactions * `shreds` - RISE Shreds SDK for 3ms confirmations * `lucide-react` - Icon library for UI elements ### Generate a Burner Wallet Create a burner wallet for testnet transactions. Run this in your terminal: ```bash node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" ``` This generates a random private key. Copy the output. This is a **burner wallet** for demo purposes. Never use this pattern with real funds or mainnet! ### Set Up Environment Variables Create a `.env.local` file in your project root: ```bash title=".env.local" NEXT_PUBLIC_BURNER_KEY=0xYOUR_GENERATED_KEY_HERE ``` Replace `YOUR_GENERATED_KEY_HERE` with the key you just generated (add `0x` prefix). The `NEXT_PUBLIC_` prefix makes this variable accessible in the browser. This is acceptable for burner wallets but never use this for production keys! *** ## Configuration ### Configure Fonts Update your root layout to include arcade-style fonts: ```typescript title="src/app/layout.tsx" import type { Metadata } from "next"; import { Geist, Geist_Mono, Press_Start_2P, Rajdhani } from "next/font/google"; import "./globals.css"; import { Navbar } from "@/components/Navbar"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); const pressStart = Press_Start_2P({ weight: "400", subsets: ["latin"], variable: "--font-doom", }); const rajdhani = Rajdhani({ weight: ["400", "500", "600", "700"], subsets: ["latin"], variable: "--font-rajdhani", }); export const metadata: Metadata = { title: "Reaction Time Game - RISE", description: "Test your reflexes with blockchain-backed precision", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` **Fonts included:** * `Press Start 2P` - Retro arcade font for titles * `Rajdhani` - Modern gaming font for UI * `Geist` - Clean sans-serif for body text ### Update Global Styles Replace your `globals.css` with Tailwind imports: ```css title="src/app/globals.css" @import "tailwindcss"; ``` That's it! Tailwind CSS 4 uses a simplified import system. *** ## Building the Navbar Create a navbar to display wallet information and balance: ```typescript title="src/components/Navbar.tsx" "use client"; import { useEffect, useState } from "react"; import { createPublicClient, http, formatEther } from "viem"; import { riseTestnet } from "viem/chains"; import { privateKeyToAccount } from "viem/accounts"; import { Copy, Check } from "lucide-react"; const account = privateKeyToAccount( process.env.NEXT_PUBLIC_BURNER_KEY as `0x${string}` ); const publicClient = createPublicClient({ chain: riseTestnet, transport: http(), }); export function Navbar() { const [balance, setBalance] = useState("0"); const [copied, setCopied] = useState(false); useEffect(() => { const fetchBalance = async () => { const bal = await publicClient.getBalance({ address: account.address, }); setBalance(formatEther(bal)); }; fetchBalance(); const interval = setInterval(fetchBalance, 10000); // Update every 10s return () => clearInterval(interval); }, []); const copyAddress = async () => { await navigator.clipboard.writeText(account.address); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return ( ); } ``` **Key features:** * Displays ETH balance (refreshes every 10 seconds) * Shows truncated burner wallet address * Copy address to clipboard with visual feedback * Arcade-themed styling with purple accents Now you're ready to implement the game logic in the [next section](/docs/cookbook/reaction-time-game/implementation).