SmartShoppie

how the components interact.

Alice creates a pool for a 3D printer (goal: $10,000, deadline: 30 days). Bob joins, deposits $500 → progress bar updates. Pool succeeds → funds go to the supplier. Bob gets the printer + NFT workshop access. Pool fails → Bob’s $500 is auto-refunded.

Tracks participation via hasParticipated mapping.

Exposes a participate(address) function to register users.

Emits a Participated event for off-chain notifications.

📅 Deployment:

Deployed to local Hardhat network (localhost) via npx hardhat node and npx hardhat deploy --network localhost.

🧠 Frontend (React + Vite)

Modern frontend application serving as an e-commerce interface:

Product List: Displays products with images, pricing, and live discount timers. WebSocket Integration: Sends purchase data to a backend WebSocket server (port 10000). Authentication Modal: Collects wallet address and triggers blockchain transactions. Transaction Flow: Purchases are written on-chain and mirrored off-chain via WebSocket.

🔗 Blockchain Integration Smart contract is integrated using wagmi/viem: useAccount() auto-detects the connected wallet address. useWriteContract() handles writing to the blockchain using participate(). Wallet address and product info are also sent via WebSocket for backend logging.

🔄 Wagmi + Provider Configuration Configured using wagmi v2 API with latest React standards: Chain: sepolia (Ethereum testnet Transport: http() provider from viem Wrappers: WagmiConfig and QueryClientProvider from @tanstack/react-query

📦 Libraries & Tools [email protected] - React hooks for Ethereum viem - Lightweight Ethereum JSON-RPC client (used by wagmi) @tanstack/react-query - React query ate management vite - Frontend build tool and dev server hardhat - Ethereum dev environment & deployment tool