SmartShoppie
This project combines a simple smart contract with a Web3-enabled React e-commerce frontend.
About
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.
How it's made
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 wagmi@2.x - 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