StakeCommerce

we change the way people shop

Comment

StakeCommerce

Web3 Staking & E-commerce demo built with Next.js 15, TypeScript, and modern Web3 tooling. Users can stake ETH (simulated in dev), earn Commerce Coins via daily check-ins, and spend them in an on-platform shop. Includes NFT achievement mechanics, streak bonuses, and a mobile-friendly UI.

Highlights

  • Web3 Wallets: MetaMask, WalletConnect (via RainbowKit / wagmi)
  • Staking (simulated): Stake 0.02 ETH to unlock daily rewards
  • Daily Check-ins: Earn Commerce Coins (CC) — maintain streaks for bonuses
  • E-commerce: Spend Commerce Coins on exclusive items and passes
  • NFT Achievements: Mintable/claimable NFT milestones
  • Responsive UI: Desktop + mobile, dark theme
  • Dev simulation: No real ETH moves — safe to run locally

🌟 Features

  • Wallet Integration — connect with MetaMask, WalletConnect and other wallets
  • Staking System — stake a set amount to enable rewards
  • Daily Check-ins — claim Commerce Coins; streaks for bonus rewards
  • Shop — product catalog, cart, checkout (uses mock inventory)
  • NFT Achievements — milestones reward NFTs or badges
  • Streak System — consecutive check-ins increase rewards
  • Responsive Design — tailored for both desktop and mobile

Tech Stack

  • Frontend: Next.js 15 (App Router), TypeScript
  • Styling: Tailwind CSS (custom dark theme)
  • Web3: wagmi, RainbowKit, ethers.js, viem
  • UI: Radix UI, Lucide React icons
  • State: React hooks / local state (simulation mode)

Project Structure

src/
├── app/                 # Next.js app router pages
│   ├── dashboard/       # User dashboard
│   ├── shop/            # Product catalog
│   ├── stake/           # Staking UI
│   └── page.tsx         # Landing page
├── components/          # Reusable components
│   ├── ui/              # UI primitives (Button, Card, etc.)
│   └── Web3Providers.tsx
├── lib/                 # Utilities & config
│   ├── config.ts
│   └── utils.ts
└── types/               # TypeScript types

Useful scripts

  • npm run dev — start dev server
  • npm run build — production build
  • npm run start — run production server
  • npm run lint — run ESLint

⚙️ Configuration

Create a .env.local:

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_project_id
NEXT_PUBLIC_APP_NAME=StakeCommerce
# Add other env variables as needed for API keys or contract addresses later

How It Works (user flow)

  1. Connect Wallet — via RainbowKit/wagmi
  2. Stake ETH — stake 0.02 ETH (simulated) to unlock daily check-ins
  3. Daily Check-ins — visit dashboard daily to claim Commerce Coins; missing a day breaks streak
  4. Shop — spend Commerce Coins on products, hardware wallet passes, educational content, or NFT access
  5. Achievements — unlock NFT/achievement rewards for milestones (early adoption, streaks, high spending)

Key Components

  • Pages

    • / — Landing / Hero
    • /stake — Stake interface
    • /dashboard — Daily check-ins & user stats
    • /shop — Product catalog and cart

  • Core components

    • Web3Providers — wallet & chain providers
    • Button, Card — reusable UI elements
    • Navigation — site header & routing

Design System

  • Primary: Purple gradient (#8b5cf6)
  • Accent: Blues, yellow for Commerce Coins (#fbbf24)
  • Background: Dark theme (gray-900)
  • UI patterns: cards, gradients, responsive grids, smooth loading states & micro-animations

Future Enhancements (roadmap)

On-chain upgrades

  • Real ETH staking smart contract (solidity)
  • ERC-20 CommerceCoin token
  • ERC-721 achievement NFTs
  • Automated reward distribution via backend/cron or on-chain logic

Backend & Operations

  • User auth & database persistence
  • Real product inventory and order fulfillment
  • Payment rails for fiat/crypto checkout
  • Unit & integration tests, CI/CD

Advanced features

  • Liquidity pools & staking rewards strategy
  • Governance/voting module
  • Referral system & multi-chain support
  • Marketplace + rentals, dynamic pricing

--

Built With

Share this project:

Updates