Step 1: ZEYROX UI Design (Screens & Flow)Screens Overview1. Splash ScreenApp Logo (ZEYROX) + tagline: “Train AI. Earn Rewards.”2. Login / SignupEmail / Google Sign-InKYC verification option (optional for later withdrawal)3. DashboardCPU/GPU Status (Idle %, Battery, Internet)Start/Stop Compute ButtonTokens Earned (ZRX Balance)4. AI Job StatusCurrent Task Progress (e.g., “Training Model: 45%”)Estimated Rewards5. WalletZRX BalanceTransfer / Withdraw (later for exchanges)6. Referral & LeaderboardInvite Friends → Earn BonusLeaderboard (Top Earners)7. SettingsDark/Light ModeNotificationsAccount Info---User FlowSplash → Login → Dashboard → Start Compute → AI Task Running → Reward Credited → Wallet---✅ मैं अब Flutter UI Mockup का कोड भी दूँगा ताकि आप जल्दी prototype कर सको।---✅ Step 2: Backend + Blockchain BaseBackend ArchitectureBackend Framework: Node.js (NestJS) + PostgreSQLAPI Modules:Auth API – Login/SignupJob API – AI Tasks fetch & submitReward API – Token calculationWallet API – Token transfer---Smart Contract (Polygon ZRX Token)Standard: ERC-20Functions:mint(address, amount) → Reward Distributiontransfer(address, amount) → User withdrawalsbalanceOf(address) → Wallet Balance---Smart Contract Code (Solidity)// SPDX-License-Identifier: MITpragma solidity ^0.8.0;contract ZeyroxToken { string public name = "Zeyrox Token"; string public symbol = "ZRX"; uint8 public decimals = 18; uint256 public totalSupply; mapping(address => uint256) public balanceOf; mapping(address => mapping(address => uint256)) public allowance; address public owner; constructor(uint256 initialSupply) { owner = msg.sender; totalSupply = initialSupply * (10 ** uint256(decimals)); balanceOf[owner] = totalSupply; } modifier onlyOwner() { require(msg.sender == owner, "Not owner"); _; } event Transfer(address indexed from, address indexed to, uint256 value); function transfer(address to, uint256 value) public returns (bool) { require(balanceOf[msg.sender] >= value, "Insufficient balance"); balanceOf[msg.sender] -= value; balanceOf[to] += value; emit Transfer(msg.sender, to, value); return true; } function mint(address to, uint256 value) public onlyOwner { balanceOf[to] += value; totalSupply += value; emit Transfer(address(0), to, value); }}---Backend Basic Structure (Node.js + Express)const express = require('express');const app = express();app.use(express.json());// Sample API: Get User Wallet Balanceapp.get('/wallet/:userId', (req, res) => { // Fetch from DB (or blockchain) res.json({ userId: req.params.userId, balance: 500 }); // Example});// Assign AI Taskapp.post('/job/assign', (req, res) => { res.json({ taskId: "AI12345", model: "image-classifier", dataChunk: "xyz" });});app.listen(3000, () => console.log('ZEYROX backend running on port 3000'));
I'll help you create a comprehensive ZEYROX UI design system with all the screens and user flows you've outlined. This will be a mobile-first React prototype that demonstrates the complete user experience.
I've created a comprehensive ZEYROX UI design system that includes all the screens and user flows you specified. Here's what I've built:
Screens Included:
The prototype demonstrates the complete user journey from onboarding to earning rewards, with all the essential features for a decentralized AI training platform.