Monorepo Structure Guide

Overview

The CR8 project is organized as a monorepo with three separate packages, each serving a distinct purpose and requiring different hosting strategies.

Project Structure

CR8/
├── packages/
│   ├── contracts/    # Smart contracts (Hardhat project)
│   ├── dapp/         # DApp - Blockchain interaction UI (Next.js)
│   └── website/      # Website - Landing & docs (Next.js static)
├── docs/             # Project documentation
└── package.json      # Root workspace configuration

Package Details

@cr8/contracts

Purpose: Smart contracts for the CR8 platform

Location: packages/contracts/

Technology: Hardhat, Solidity

Hosting: Not applicable (deployed to blockchain networks)

Deployment:

• Deploy to testnet: npm run deploy:sepolia --workspace=packages/contracts
• Deploy to mainnet: Configure and deploy via Hardhat scripts

Key Files:

• contracts/ - Solidity contracts
• scripts/ - Deployment scripts
• test/ - Contract tests
• hardhat.config.js - Hardhat configuration

@cr8/dapp

Purpose: Blockchain interaction interface for users

Location: packages/dapp/

Technology: Next.js, React, TypeScript, Wagmi, RainbowKit

Hosting: Vercel (recommended) or any Node.js hosting

Deployment:

1. Connect GitHub repo to Vercel
2. Set root directory to packages/dapp
3. Configure environment variables:
   • NEXT_PUBLIC_CHAIN_ID
   • NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
4. Deploy

Vercel Configuration: Already configured in packages/dapp/vercel.json

Key Features:

• Agent Registry & Registration
• CR8 Token Staking
• Portfolio Management
• Agent Detail Pages
• Liquidity Provision
• Reward Claiming

@cr8/website

Purpose: Landing page, documentation, and marketing

Location: packages/website/

Technology: Next.js (static export), React, TypeScript, Tailwind CSS

Hosting: Any static hosting (Vercel, Netlify, GitHub Pages, Cloudflare Pages)

Deployment:

1. Build: npm run build --workspace=packages/website
2. Deploy the out/ directory to static hosting
3. Or connect to Vercel/Netlify for automatic deployments

Vercel Configuration: Already configured in packages/website/vercel.json

Key Features:

• Landing page
• Documentation
• Marketing content
• Static site generation

Development Workflow

Install Dependencies

# Install all packages
npm install

# Or install specific package
cd packages/contracts && npm install
cd packages/dapp && npm install
cd packages/website && npm install

Development

# Contracts
npm run contracts:compile
npm run contracts:test

# DApp (runs on port 3000)
npm run dapp:dev

# Website (runs on port 3001)
npm run website:dev

Building

# Build all
npm run contracts:compile
npm run dapp:build
npm run website:build

# Or build individually
cd packages/dapp && npm run build
cd packages/website && npm run build

Deployment Strategy

Separate Hosting

Each package can be deployed independently:

1. Contracts: Deploy to blockchain networks (Sepolia, Mainnet)
2. DApp: Deploy to Vercel (or similar Node.js hosting)
3. Website: Deploy to static hosting (Vercel, Netlify, etc.)

Vercel Setup

For DApp:

1. Go to Vercel dashboard
2. Import project from GitHub
3. Set root directory: packages/dapp
4. Configure environment variables
5. Deploy

For Website:

1. Create a separate Vercel project
2. Set root directory: packages/website
3. Configure as static site
4. Deploy

Environment Variables

DApp (.env.local in packages/dapp/):

NEXT_PUBLIC_CHAIN_ID=11155111
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id

Contracts (.env in packages/contracts/):

PRIVATE_KEY=your_private_key
SEPOLIA_RPC_URL=your_rpc_url
ETHERSCAN_API_KEY=your_api_key

Benefits of This Structure

1. Separation of Concerns: Each package has a clear purpose
2. Independent Deployment: Deploy packages separately as needed
3. Different Hosting: Use appropriate hosting for each package type
4. Code Sharing: Shared utilities can be added as separate packages
5. Version Management: Each package can be versioned independently
6. Team Collaboration: Different teams can work on different packages

Future Additions

Potential additional packages:

• @cr8/shared - Shared utilities and types
• @cr8/sdk - JavaScript SDK for interacting with contracts
• @cr8/mobile - Mobile app (React Native)

Troubleshooting

Workspace Issues

If npm workspaces aren't working:

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

Build Issues

If builds fail, ensure you're in the correct directory:

# For contracts
cd packages/contracts && npm run compile

# For dapp
cd packages/dapp && npm run build

# For website
cd packages/website && npm run build

Resources

• npm workspaces documentation
• Vercel monorepo guide
• Hardhat documentation