# Setup (/docs/cookbook/shred-ninja/setup)
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
## Project Setup
### Create a New Next.js Project
Let's start by creating a fresh Next.js application:
```bash
npx create-next-app@latest shred-ninja
```
```bash
yarn create next-app shred-ninja
```
```bash
pnpm create next-app shred-ninja
```
```bash
bun create next-app shred-ninja
```
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 shred-ninja
```
### Install Dependencies
Add the packages needed for blockchain integration and animations:
```bash
npm install viem shreds ws framer-motion
npm install --save-dev @types/ws
```
```bash
yarn add viem shreds ws framer-motion
yarn add --dev @types/ws
```
```bash
pnpm add viem shreds ws framer-motion
pnpm add -D @types/ws
```
```bash
bun add viem shreds ws framer-motion
bun add -D @types/ws
```
**Package breakdown:**
* `viem` - Lightweight Ethereum library for blockchain interactions
* `shreds` - RISE's package for realtime event streaming via `watchShreds`
* `ws` - WebSocket client for persistent connections
* `framer-motion` - Smooth animations for flying tokens
* `@types/ws` - TypeScript definitions for WebSocket
### Add Background Music (Optional)
To enhance the arcade experience, you can add background music. Just add a music file of your choice in `/public`. This is entirely optional and the game works fine without it.
***
## Understanding Shreds and Event Streaming
Before coding, let's understand how RISE's shreds differ from traditional event monitoring.
### Traditional Event Monitoring
**Polling**: Your app repeatedly asks "are there new events?" every few seconds. This wastes resources and creates artificial delays. If an event happens right after your last poll, you won't know until the next one.
### RISE's Shreds Approach
RISE uses a WebSocket connection to stream events as they happen. Transactions are bundled into "shreds" and pushed to your app within milliseconds.
This is what makes Shred Ninja possible: every token on screen represents a real blockchain transfer happening at that moment, with latency so low it feels like a traditional web app.
***
## Configuration
### Configure the Root Layout
Set up your application's root layout:
```typescript title="src/app/layout.tsx"
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Shred Ninja - RISE",
description: "Realtime blockchain game powered by RISE Shreds",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{children}
);
}
```
This sets up Google's Geist fonts and a dark theme perfect for our arcade-style game.
Now you're ready to build the game in the [next section](/docs/cookbook/shred-ninja/implementation).