This document describes the complete integration between the BlackRoad OS desktop front-end and the FastAPI backend, transforming the static mockup into a fully functional web-based operating system.
┌─────────────────────────────────────────────────────────────┐
│ FRONT-END (BlackRoad OS Desktop UI) │
│ Location: backend/static/ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ index.html │ │
│ │ - Windows 95-inspired UI │ │
│ │ - 16 desktop applications │ │
│ │ - Dynamic content loading │ │
│ └──────────────────────────────────────────────────────┘ │
│ │ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ JavaScript Modules │ │
│ │ ├─ api-client.js (API communication layer) │ │
│ │ ├─ auth.js (authentication & session management) │ │
│ │ └─ apps.js (application data loading & UI updates) │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
↕ HTTP/JSON
┌─────────────────────────────────────────────────────────────┐
│ BACK-END (FastAPI Server) │
│ Location: backend/app/ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ API Routers │ │
│ │ ├─ /api/auth - Authentication & user mgmt │ │
│ │ ├─ /api/blockchain - RoadCoin blockchain │ │
│ │ ├─ /api/miner - Mining stats & control │ │
│ │ ├─ /api/devices - IoT/Raspberry Pi management │ │
│ │ ├─ /api/email - RoadMail │ │
│ │ ├─ /api/social - Social media feed │ │
│ │ ├─ /api/videos - BlackStream video platform │ │
│ │ ├─ /api/files - File storage │ │
│ │ └─ /api/ai-chat - AI assistant │ │
│ └──────────────────────────────────────────────────────┘ │
│ │ │
│ ┌────────────────────┐ ┌─────────────────────┐ │
│ │ PostgreSQL │ │ Redis │ │
│ │ - All data models │ │ - Sessions/cache │ │
│ └────────────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Backend:
- New models:
Device,DeviceMetric,DeviceLog - Router:
backend/app/routers/devices.py - Endpoints:
GET /api/devices/- List all devicesGET /api/devices/stats- Overall device statisticsGET /api/devices/{device_id}- Get device detailsPOST /api/devices/- Register new devicePUT /api/devices/{device_id}- Update devicePOST /api/devices/{device_id}/heartbeat- Device status update (for IoT agents)DELETE /api/devices/{device_id}- Remove device
Frontend:
- Window: Raspberry Pi (🥧)
- Shows online/offline status of all registered devices
- Displays CPU, RAM, temperature metrics for online devices
- Auto-populated from
/api/devicesendpoint
Backend:
- Router:
backend/app/routers/miner.py - Features:
- Simulated mining process with hashrate, shares, temperature
- Start/stop/restart mining controls
- Lifetime statistics (blocks mined, RoadCoins earned)
- Recent blocks listing
- Mining pool information
- Endpoints:
GET /api/miner/status- Current miner performanceGET /api/miner/stats- Lifetime mining statisticsGET /api/miner/blocks- Recently mined blocksPOST /api/miner/control- Start/stop miningGET /api/miner/pool/info- Pool connection info
Frontend:
- Window: RoadCoin Miner (⛏️)
- Live stats: hashrate, shares, temperature, power consumption
- Blocks mined count and RoadCoins earned
- Start/stop mining button
- Recent blocks list with timestamps
Frontend Integration:
- Window: RoadChain Explorer (⛓️)
- Live data from
/api/blockchainendpoints:- Chain height, total transactions, difficulty
- Recent blocks list (clickable for details)
- "Mine New Block" button
- Auto-refreshes blockchain stats
Frontend Integration:
- Window: Wallet (💰)
- Real-time balance from
/api/blockchain/balance - Wallet address display with copy functionality
- Recent transactions list with incoming/outgoing indicators
- USD conversion estimate
Features:
- Login/Register modal that blocks access until authenticated
- JWT token-based authentication stored in
localStorage - Session persistence across page reloads
- Auto-logout on token expiration
- User-specific data isolation
Files:
backend/static/js/auth.js- Authentication module- Automatic wallet creation on user registration
- Login form with keyboard support (Enter to submit)
RoadMail:
- Connected to
/api/emailendpoints - Shows real inbox messages
- Email detail viewing (TODO: full implementation)
BlackRoad Social:
- Connected to
/api/social/feed - Shows real posts from database
- Like/comment functionality
- Post creation (stub)
BlackStream:
- Connected to
/api/videos - Video grid with view/like counts
- Video playback (stub)
AI Assistant:
- Connected to
/api/ai-chatendpoints - Conversation management (basic UI)
- Message sending (simulated responses until OpenAI integration)
Key Features:
- Automatic base URL detection (localhost vs production)
- JWT token management
- Automatic 401 handling (triggers re-login)
- Centralized error handling
- Type-safe method wrappers for all API endpoints
Usage Example:
// Get miner status
const status = await window.BlackRoadAPI.getMinerStatus();
// Mine a new block
const block = await window.BlackRoadAPI.mineBlock();
// Get devices
const devices = await window.BlackRoadAPI.getDevices();Responsibilities:
- Load data when windows are opened
- Auto-refresh for real-time windows (miner stats every 5s)
- Format and render dynamic content
- Handle user interactions (mine block, toggle miner, etc.)
Window Loading:
- Lazy loading: data is fetched only when window is opened
- Auto-refresh for critical apps (miner, blockchain)
- Efficient state management
Required Environment Variables:
# Database
DATABASE_URL=postgresql://user:pass@host:5432/db
DATABASE_ASYNC_URL=postgresql+asyncpg://user:pass@host:5432/db
# Redis
REDIS_URL=redis://host:6379/0
# Security
SECRET_KEY=your-production-secret-key
# CORS - Add your production domain
ALLOWED_ORIGINS=https://www.blackroad.systems
# Optional: AI Integration
OPENAI_API_KEY=sk-...
# Optional: Email
SMTP_HOST=smtp.gmail.com
SMTP_USER=your-email@gmail.com
SMTP_PASSWORD=your-app-password
# Optional: File Storage
AWS_ACCESS_KEY_ID=...
AWS_SECRET_ACCESS_KEY=...
S3_BUCKET_NAME=blackroad-filesThe app is designed to work seamlessly with Railway:
- Static Files: Backend serves
backend/static/index.htmlat root URL - API Routes: All API endpoints under
/api/* - CORS: Configured to allow Railway domains
- Database: PostgreSQL plugin
- Redis: Redis plugin
Start Command:
cd backend && uvicorn app.main:app --host 0.0.0.0 --port $PORTdevices:
- Device registration and status tracking
- Real-time metrics (CPU, RAM, temperature)
- Services and capabilities tracking
- Owner association (user_id)
device_metrics:
- Time-series data for device performance
- Historical tracking
device_logs:
- Device event logging
- System, network, service, hardware events
users:
- Added
devicesrelationship
The backend now serves the front-end:
# backend/app/main.py
static_dir = os.path.join(os.path.dirname(os.path.dirname(__file__)), "static")
app.mount("/static", StaticFiles(directory=static_dir, html=True), name="static")
@app.get("/")
async def serve_frontend():
return FileResponse(os.path.join(static_dir, "index.html"))-
Start Backend:
cd backend docker-compose up -d # Start PostgreSQL + Redis python run.py # Start FastAPI server (defaults to :8000 unless PORT is set)
-
Access UI:
http://localhost:8000 -
API Docs:
http://localhost:8000/api/docs
cd backend
pytest# All static files are already in backend/static/
# No build step required - pure HTML/CSS/JS- Real XMRig integration for actual cryptocurrency mining
- WebSocket support for real-time updates
- MQTT broker integration for device heartbeats
- Actual AI chat integration (OpenAI/Anthropic API)
- File upload to S3
- Email sending via SMTP
- Video upload and streaming
- Enhanced blockchain features (peer-to-peer, consensus)
- Mobile responsive design
- Dark mode support
- Keyboard shortcuts for all actions
- Desktop icon customization
✅ Implemented:
- JWT authentication with token expiration
- Password hashing (bcrypt)
- CORS protection
- SQL injection prevention (SQLAlchemy ORM)
- User data isolation
- Rate limiting on API endpoints
- HTTPS enforcement in production
- Wallet private key encryption at rest
- Two-factor authentication
- API key rotation
1. Authentication Modal Won't Close
- Check browser console for API errors
- Verify DATABASE_URL and SECRET_KEY are set
- Ensure PostgreSQL is running
2. Static Files Not Loading
- Verify
backend/static/directory exists - Check
backend/static/js/has all three JS files - Review browser console for 404 errors
3. API Calls Failing
- Check CORS settings in
.env - Verify ALLOWED_ORIGINS includes your domain
- Check browser network tab for CORS errors
4. Mining Stats Not Updating
- Verify user is logged in
- Check browser console for errors
- Ensure
/api/minerendpoints are working (test in/api/docs)
BlackRoad-Operating-System/
├── backend/
│ ├── app/
│ │ ├── main.py # FastAPI app with static file serving
│ │ ├── models/
│ │ │ ├── device.py # NEW: Device, DeviceMetric, DeviceLog
│ │ │ └── user.py # UPDATED: Added devices relationship
│ │ └── routers/
│ │ ├── devices.py # NEW: Device management API
│ │ └── miner.py # NEW: Mining stats & control API
│ ├── static/
│ │ ├── index.html # UPDATED: Added auth modal, CSS, JS imports
│ │ └── js/
│ │ ├── api-client.js # NEW: Centralized API client
│ │ ├── auth.js # NEW: Authentication module
│ │ └── apps.js # NEW: Application data loaders
│ └── .env.example # UPDATED: Added device & mining vars
└── INTEGRATION_GUIDE.md # THIS FILE
POST /api/auth/register- Create accountPOST /api/auth/login- Get JWT tokenGET /api/auth/me- Get current userPOST /api/auth/logout- Invalidate token
GET /api/miner/status- Current performanceGET /api/miner/stats- Lifetime statsGET /api/miner/blocks- Recent blocksPOST /api/miner/control- Start/stop
GET /api/blockchain/wallet- User walletGET /api/blockchain/balance- Current balanceGET /api/blockchain/blocks- Recent blocksPOST /api/blockchain/mine- Mine new blockGET /api/blockchain/stats- Chain statistics
GET /api/devices/- List devicesGET /api/devices/stats- StatisticsPOST /api/devices/- Register devicePOST /api/devices/{id}/heartbeat- Update status
- See existing API documentation at
/api/docs
For issues, questions, or contributions:
- GitHub Issues: https://github.com/blackboxprogramming/BlackRoad-Operating-System/issues
- Pull Requests: Always welcome!
Last Updated: 2025-11-16 Version: 1.0.0 - Full Backend Integration