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://github.com/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:

- Check the issue tracker
- Join our Discord
- Contact: andreas.fleckl@bubuit.net