Documentation › Components › Marketplace Web
Back to Components

Marketplace Web

Vite/TypeScript marketplace with offer/bid functionality, stats dashboard, and mock/live data toggle. Production UI ready.

● Live
Documentation Format: View this documentation in markdown format for easier contribution and version control.

Overview

The Marketplace Web is the primary interface for clients to submit AI compute jobs and for miners to offer their services. It provides a real-time trading platform with comprehensive job management and analytics.

Key Features

  • Real-time job marketplace with offer/bid functionality
  • Interactive statistics dashboard
  • Mock/live data toggle for development
  • Responsive design for all devices
  • WebSocket integration for live updates
  • Wallet integration for seamless payments

Technology Stack

Framework Vite 4.x
Language TypeScript 5.x
UI TailwindCSS + Headless UI
State Management Zustand
Charts Chart.js
WebSocket Native WebSocket API
Icons Lucide React

Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

# Clone the repository
git clone https://gitea.bubuit.net/oib/aitbc.git
cd aitbc/apps/marketplace-web

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Environment Configuration

# .env.local
VITE_API_URL=http://localhost:18000
VITE_WS_URL=ws://localhost:18001
VITE_NETWORK=mainnet
VITE_MOCK_DATA=false

Features

Job Marketplace

  • Submit AI compute jobs with custom parameters
  • Browse available miner offers
  • Real-time price discovery
  • Job history and tracking

Statistics Dashboard

  • Real-time network metrics
  • Job completion rates
  • GPU utilization charts
  • Price trends analysis

Wallet Integration

  • Connect wallet via private key or keystore
  • View balance and transaction history
  • Sign transactions for job submissions
  • Receipt verification

API Integration

Coordinator API

// Job submission
POST /v1/jobs
{
  "type": "inference",
  "prompt": "Your prompt here",
  "model": "llama3.2:latest",
  "max_price": "100aitbc"
}

// WebSocket for live updates
ws://localhost:18001/ws

Blockchain RPC

// Get transaction status
curl -X POST http://localhost:26657 \
  -d '{
    "jsonrpc": "2.0",
    "method": "tx",
    "params": ["0x..."]
  }'

Development

Project Structure

marketplace-web/
├── src/
│   ├── components/     # Reusable UI components
│   ├── pages/         # Page components
│   ├── hooks/         # Custom React hooks
│   ├── stores/        # Zustand stores
│   ├── services/      # API services
│   ├── types/         # TypeScript definitions
│   └── utils/         # Utility functions
├── public/
├── package.json
└── vite.config.ts

Mock Data

Toggle mock data mode for development without a running backend:

// In .env.local
VITE_MOCK_DATA=true

Building for Production

# Build optimized bundle
npm run build

# Output in dist/ directory
# Deploy to any static hosting service

Deployment

Docker Deployment

# Build image
docker build -t aitbc/marketplace-web .

# Run with nginx
docker run -d \
  -p 80:80 \
  -e VITE_API_URL=http://api.aitbc.bubuit.net \
  aitbc/marketplace-web

Environment Variables

  • VITE_API_URL - Coordinator API endpoint
  • VITE_WS_URL - WebSocket endpoint
  • VITE_NETWORK - Network name (mainnet/testnet)
  • VITE_MOCK_DATA - Enable/disable mock data

Support

For marketplace-specific issues: