266 lines
9.5 KiB
HTML
266 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Marketplace Web - AITBC Documentation</title>
|
||
|
||
<link rel="stylesheet" href="css/docs.css">
|
||
<link rel="stylesheet" href="/assets/css/site-header.css">
|
||
<link rel="preload" href="/assets/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
||
<noscript><link rel="stylesheet" href="/assets/css/font-awesome.min.css"></noscript>
|
||
<!-- Font Awesome CDN fallback -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" media="print" onload="this.media='all'; this.onload=null;">
|
||
</head>
|
||
<body>
|
||
<div data-global-header></div>
|
||
|
||
<main>
|
||
<div class="container">
|
||
<!-- Breadcrumb -->
|
||
<div class="breadcrumb">
|
||
<a href="index.html">Documentation</a>
|
||
<span>›</span>
|
||
<a href="components.html">Components</a>
|
||
<span>›</span>
|
||
<span>Marketplace Web</span>
|
||
</div>
|
||
|
||
<!-- Back Button -->
|
||
<a href="components.html" class="back-button">
|
||
<i class="fas fa-arrow-left"></i>
|
||
Back to Components
|
||
</a>
|
||
|
||
<!-- Header -->
|
||
<div class="doc-header">
|
||
<h1><i class="fas fa-store"></i> Marketplace Web</h1>
|
||
<p>Vite/TypeScript marketplace with offer/bid functionality, stats dashboard, and mock/live data toggle. Production UI ready.</p>
|
||
<span class="status-badge">● Live</span>
|
||
</div>
|
||
|
||
<!-- Alert for markdown format -->
|
||
<div class="alert alert-info">
|
||
<i class="fas fa-info-circle"></i>
|
||
<strong>Documentation Format:</strong> <a href="https://github.com/oib/AITBC/blob/main/docs/marketplace-web.md" target="_blank" style="color: #1e40af; text-decoration: underline;">View this documentation in markdown format</a> for easier contribution and version control.
|
||
</div>
|
||
|
||
<!-- Overview -->
|
||
<section class="content-section">
|
||
<h2>Overview</h2>
|
||
<p>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.</p>
|
||
|
||
<h3>Key Features</h3>
|
||
<ul>
|
||
<li>Real-time job marketplace with offer/bid functionality</li>
|
||
<li>Interactive statistics dashboard</li>
|
||
<li>Mock/live data toggle for development</li>
|
||
<li>Responsive design for all devices</li>
|
||
<li>WebSocket integration for live updates</li>
|
||
<li>Wallet integration for seamless payments</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Technology Stack -->
|
||
<section class="content-section">
|
||
<h2>Technology Stack</h2>
|
||
<div class="tech-grid">
|
||
<div class="tech-item">
|
||
<strong>Framework</strong>
|
||
Vite 4.x
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>Language</strong>
|
||
TypeScript 5.x
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>UI</strong>
|
||
TailwindCSS + Headless UI
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>State Management</strong>
|
||
Zustand
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>Charts</strong>
|
||
Chart.js
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>WebSocket</strong>
|
||
Native WebSocket API
|
||
</div>
|
||
<div class="tech-item">
|
||
<strong>Icons</strong>
|
||
Lucide React
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Getting Started -->
|
||
<section class="content-section">
|
||
<h2>Getting Started</h2>
|
||
|
||
<h3>Prerequisites</h3>
|
||
<ul>
|
||
<li>Node.js 18+</li>
|
||
<li>npm or yarn</li>
|
||
</ul>
|
||
|
||
<h3>Installation</h3>
|
||
<pre><code># 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</code></pre>
|
||
|
||
<h3>Environment Configuration</h3>
|
||
<pre><code># .env.local
|
||
VITE_API_URL=http://localhost:18000
|
||
VITE_WS_URL=ws://localhost:18001
|
||
VITE_NETWORK=mainnet
|
||
VITE_MOCK_DATA=false</code></pre>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section class="content-section">
|
||
<h2>Features</h2>
|
||
|
||
<h3>Job Marketplace</h3>
|
||
<ul>
|
||
<li>Submit AI compute jobs with custom parameters</li>
|
||
<li>Browse available miner offers</li>
|
||
<li>Real-time price discovery</li>
|
||
<li>Job history and tracking</li>
|
||
</ul>
|
||
|
||
<h3>Statistics Dashboard</h3>
|
||
<ul>
|
||
<li>Real-time network metrics</li>
|
||
<li>Job completion rates</li>
|
||
<li>GPU utilization charts</li>
|
||
<li>Price trends analysis</li>
|
||
</ul>
|
||
|
||
<h3>Wallet Integration</h3>
|
||
<ul>
|
||
<li>Connect wallet via private key or keystore</li>
|
||
<li>View balance and transaction history</li>
|
||
<li>Sign transactions for job submissions</li>
|
||
<li>Receipt verification</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- API Integration -->
|
||
<section class="content-section">
|
||
<h2>API Integration</h2>
|
||
|
||
<h3>Coordinator API</h3>
|
||
<pre><code>// 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</code></pre>
|
||
|
||
<h3>Blockchain RPC</h3>
|
||
<pre><code>// Get transaction status
|
||
curl -X POST http://localhost:26657 \
|
||
-d '{
|
||
"jsonrpc": "2.0",
|
||
"method": "tx",
|
||
"params": ["0x..."]
|
||
}'</code></pre>
|
||
</section>
|
||
|
||
<!-- Development -->
|
||
<section class="content-section">
|
||
<h2>Development</h2>
|
||
|
||
<h3>Project Structure</h3>
|
||
<pre><code>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</code></pre>
|
||
|
||
<h3>Mock Data</h3>
|
||
<p>Toggle mock data mode for development without a running backend:</p>
|
||
<pre><code>// In .env.local
|
||
VITE_MOCK_DATA=true</code></pre>
|
||
|
||
<h3>Building for Production</h3>
|
||
<pre><code># Build optimized bundle
|
||
npm run build
|
||
|
||
# Output in dist/ directory
|
||
# Deploy to any static hosting service</code></pre>
|
||
</section>
|
||
|
||
<!-- Deployment -->
|
||
<section class="content-section">
|
||
<h2>Deployment</h2>
|
||
|
||
<h3>Docker Deployment</h3>
|
||
<pre><code># 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</code></pre>
|
||
|
||
<h3>Environment Variables</h3>
|
||
<ul>
|
||
<li><code>VITE_API_URL</code> - Coordinator API endpoint</li>
|
||
<li><code>VITE_WS_URL</code> - WebSocket endpoint</li>
|
||
<li><code>VITE_NETWORK</code> - Network name (mainnet/testnet)</li>
|
||
<li><code>VITE_MOCK_DATA</code> - Enable/disable mock data</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Support -->
|
||
<section class="content-section">
|
||
<h2>Support</h2>
|
||
<p>For marketplace-specific issues:</p>
|
||
<ul>
|
||
<li>Check the <a href="full-documentation.html">issue tracker</a></li>
|
||
<li>Join our <a href="https://discord.gg/aitbc">Discord</a></li>
|
||
<li>Contact: <a href="mailto:andreas.fleckl@bubuit.net">andreas.fleckl@bubuit.net</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2026 AITBC. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
<script src="js/theme.js"></script>
|
||
<script src="/assets/js/global-header.js"></script>
|
||
</body>
|
||
</html>
|