Local Development Guide

Quick Start

1. Install Dependencies

From the repository root:

npm install

This will install dependencies for all packages (contracts, dapp, website) using npm workspaces.

2. Run Website Locally

npm run website:dev

Website will be available at: localhost:3001

3. Run DApp Locally

npm run dapp:dev

DApp will be available at: localhost:3000

Detailed Setup

Prerequisites

• Node.js v18+
• npm v9+
• Git

Step-by-Step

1. Clone and Install

   cd /path/to/CR8
   npm install

2. Run Website (Terminal 1)

   npm run website:dev
   # Opens on `localhost:3001`

3. Run DApp (Terminal 2)

   npm run dapp:dev
   # Opens on `localhost:3000`

Environment Variables

DApp Environment Variables

Create packages/dapp/.env.local:

NEXT_PUBLIC_CHAIN_ID=11155111
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id
NEXT_PUBLIC_CR8_TOKEN_ADDRESS=0xE808092649524be59337815D57cd2CFa457E2263
NEXT_PUBLIC_CR8_STAKING_ADDRESS=0x64352520ac1F83f1447cF72E42819010D2359537
NEXT_PUBLIC_TOKEN_VESTING_ADDRESS=0xCCcadaD8Bd3C32811e3dd194128d4E3A90e2f315
NEXT_PUBLIC_AGENT_DEPOSIT_ADDRESS=0xB3E801EAce32f616c67B0Ac29Cd0eb1677587C28

Website Environment Variables

No environment variables needed for the website (static site).

Available Scripts

Root Level (from repo root)

# Contracts
npm run contracts:compile    # Compile smart contracts
npm run contracts:test        # Run contract tests
npm run contracts:deploy:sepolia  # Deploy to Sepolia

# DApp
npm run dapp:dev              # Start DApp dev server (port 3000)
npm run dapp:build            # Build DApp for production
npm run dapp:start            # Start DApp production server

# Website
npm run website:dev           # Start website dev server (port 3001)
npm run website:build         # Build website for production
npm run website:start         # Start website production server

Package Level

You can also run commands from individual packages:

# DApp
cd packages/dapp
npm run dev
npm run build
npm start

# Website
cd packages/website
npm run dev
npm run build
npm start

Development URLs

• Website: localhost:3001
• DApp: localhost:3000

Troubleshooting

Port Already in Use

If port 3000 or 3001 is already in use:

DApp:

cd packages/dapp
# Edit package.json, change dev script to:
# "dev": "next dev -p 3002"
npm run dev

Website:

cd packages/website
# Already configured for port 3001
# If needed, change to different port in package.json

Dependencies Not Found

# Clean install
rm -rf node_modules packages/*/node_modules
rm -rf package-lock.json packages/*/package-lock.json
npm install

Build Errors

DApp:

cd packages/dapp
npm run build
# Check for TypeScript errors

Website:

cd packages/website
npm run build
# Check for build errors

Environment Variables Not Loading

• Make sure .env.local is in packages/dapp/ directory
• Restart the dev server after adding/changing env vars
• Check that variable names start with NEXT_PUBLIC_ for client-side access

Hot Reload

Both Next.js apps support hot module replacement (HMR):

• Changes to components/pages auto-reload
• No need to restart server for most changes
• Restart only needed for config changes

Testing Contracts Locally

# Start local Hardhat node
cd packages/contracts
npx hardhat node

# In another terminal, deploy contracts
npm run deploy:local

# Update DApp .env.local with local contract addresses

Next Steps

1. ✅ Install dependencies: npm install
2. ✅ Start website: npm run website:dev
3. ✅ Start dapp: npm run dapp:dev
4. ✅ Configure environment variables for dapp
5. ✅ Connect wallet and test functionality

Production Builds

Build Website

npm run website:build
# Output: packages/website/out/

Build DApp

npm run dapp:build
# Output: packages/dapp/.next/

Need Help?

• Check package-specific READMEs:
  • packages/dapp/README.md
  • packages/website/README.md
  • packages/contracts/README.md