Quick Start Guide

Next.js App Router │ ├── components/ # React Components │ └── lib/ #
Core Services ├── api/ # NestJS API Server (port 3001) │ ├── src/ #
Source Code │ └── test/ # Tests └── zzyra-worker/ # NestJS Worker Service
(port 3002) ├── src/ # Source Code └── test/ # Tests ```
</Tab>

{" "}

<Tab title='Packages'>
```bash packages/ ├── database/ # Prisma Client & Repositories │ ├── prisma/ #
Database Schema │ └── src/ # Database Services ├── types/ # Shared TypeScript
Types │ └── src/ # Type Definitions └── blocks/ # Block Library └── src/ #
Block Definitions ```
</Tab>

<Tab title='Infrastructure'>
```bash docker-compose.yml # Development Infrastructure
setup-compose.yml # Local Development Setup turbo.json # Turbo
Configuration package.json # Root Package pnpm-workspace.yaml #
Workspace Configuration ```
</Tab>
</Tabs>

## 4. Essential Commands

<h3>🚀 Development Commands</h3>

<CardGroup cols={2}>
<Card title='Development' icon='code'>
<div className='command-list'>
  <div className='command'>
    <span className='cmd'>pnpm dev</span>
    <span className='desc'>Start all services</span>
  </div>
  <div className='command'>
    <span className='cmd'>pnpm dev:ui</span>
    <span className='desc'>Frontend only</span>
  </div>
  <div className='command'>
    <span className='cmd'>pnpm dev:api</span>
    <span className='desc'>API server only</span>
  </div>
  <div className='command'>
    <span className='cmd'>pnpm dev:worker</span>
    <span className='desc'>Worker service only</span>
  </div>
</div>
</Card>

{" "}

<Card title='Database' icon='database'>
<div className='command-list'>
<div className='command'>
  <span className='cmd'>pnpm prisma studio</span>
  <span className='desc'>Open database browser</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm prisma generate</span>
  <span className='desc'>Generate Prisma client</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm prisma migrate dev</span>
  <span className='desc'>Create migration</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm prisma db seed</span>
  <span className='desc'>Seed database</span>
</div>
</div>
</Card>

{" "}

<Card title='Building' icon='hammer'>
<div className='command-list'>
<div className='command'>
  <span className='cmd'>pnpm build</span>
  <span className='desc'>Build all packages</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm build:ui</span>
  <span className='desc'>Build frontend</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm build:api</span>
  <span className='desc'>Build API server</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm build:worker</span>
  <span className='desc'>Build worker service</span>
</div>
</div>
</Card>

{" "}

<Card title='Testing' icon='test'>
<div className='command-list'>
<div className='command'>
  <span className='cmd'>pnpm test</span>
  <span className='desc'>Run all tests</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm test:ui</span>
  <span className='desc'>Frontend tests</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm test:api</span>
  <span className='desc'>API tests</span>
</div>
<div className='command'>
  <span className='cmd'>pnpm test:e2e</span>
  <span className='desc'>End-to-end tests</span>
</div>
</div>
</Card>

</CardGroup>

## 5. Environment Variables

<h3>🔧 Essential Environment Variables</h3>

<Alert type='warning'>
**Important**: Create `.env` files in each app directory before starting
development
</Alert>

<Tabs>
<Tab title="Frontend (.env.local)">
```bash
# API Connection
NEXT_PUBLIC_API_URL=http://localhost:3001

# Authentication

NEXT*PUBLIC_MAGIC_PUBLISHABLE_KEY=pk_live*...

# Web3

NEXT_PUBLIC_ALCHEMY_API_KEY=...
NEXT_PUBLIC_INFURA_API_KEY=...