🚀 Gasless Badge

Mint personalized NFT event badges completely gas-free using UGF on Base Sepolia.

Gasless Badge is a modern Web3 event badge platform that allows users to mint fully on-chain NFT badges without needing ETH for gas fees. Built with React, Solidity, UGF, and Base Sepolia, the platform delivers a seamless onboarding experience for both crypto-native and non-crypto users.

Live Demo · Features · Tech Stack · Project Structure · Getting Started · UGF Integration

---

🌐 Live Demo

🔗 Deployed App Link: https://holy-trinity-sandy.vercel.app/
🔗 UGF SCAN: https://universalgasframework.com/docs/overview
🔗 Network: Base Sepolia Testnet

⚠️ This project runs entirely on Base Sepolia testnet. Users mint NFT badges without ETH using Universal Gas Framework (UGF).

---

🎯 Problem Statement

Most Web3 applications still suffer from one major issue:

New users cannot easily interact with blockchain apps.

Traditional onboarding requires:

• Setting up MetaMask
• Buying ETH
• Understanding gas fees
• Switching blockchain networks
• Handling failed transactions

For events, hackathons, and onboarding campaigns, this creates unnecessary friction.

---

💡 Solution

Gasless Badge solves this by enabling:

• ✅ Gasless NFT minting
• ✅ Zero ETH requirement
• ✅ Simple wallet onboarding
• ✅ Fully on-chain NFT metadata
• ✅ Beautiful personalized event badges
• ✅ Modern Web2-like UX for Web3 users

Users simply:

Connect Wallet
      ↓
Enter Name
      ↓
Click "Claim Badge"
      ↓
Approve Mock USD via UGF
      ↓
NFT Badge Minted Instantly

---

✨ Features

🎨 NFT Features

• Personalized NFT badges
• Fully on-chain SVG artwork
• Dynamic NFT metadata generation
• ERC721 standard implementation
• Real-time badge preview
• Event-ready minting flow

⚡ Blockchain Features

• Gasless transactions using UGF
• Base Sepolia integration
• Mock USD gas payments
• Secure ethers.js interactions
• Reown AppKit wallet support

🖥️ UI/UX Features

• Futuristic glassmorphism design
• Particle animated background
• Smooth Framer Motion animations
• Responsive mobile-first interface
• Dark mode aesthetics
• Animated mint success screen

---

🛠️ Tech Stack

Frontend

Technology	Purpose
React 18	UI framework
Vite 5	Build tool
Tailwind CSS	Styling
Framer Motion	Animations
React Icons	Icons
React Hot Toast	Notifications

Blockchain

Technology	Purpose
Solidity 0.8.24	Smart contract language
OpenZeppelin	ERC721 implementation
ethers.js v6	Blockchain interaction
Base Sepolia	Testnet blockchain

Wallet & Gas

Technology	Purpose
Reown AppKit	Wallet connection
Universal Gas Framework (UGF)	Gas abstraction
Mock USD	Gas payment currency

---

📁 Project Structure

Gasless-Badge/
│
├── 📁 contracts/
│   ├── EventBadge.sol
│   ├── hardhat.config.js
│   ├── package.json
│   ├── .env.example
│   └── 📁 scripts/
│       └── deploy.js
│
├── 📁 public/
│   └── badge.svg
│
├── 📁 src/
│   ├── 📁 components/
│   │   ├── Navbar.jsx
│   │   ├── Hero.jsx
│   │   ├── ClaimBadge.jsx
│   │   ├── BadgePreview.jsx
│   │   ├── MintSuccess.jsx
│   │   ├── ParticleBackground.jsx
│   │   └── Footer.jsx
│   │
│   ├── 📁 config/
│   │   ├── appkit.js
│   │   └── contract.js
│   │
│   ├── 📁 hooks/
│   │   └── useMintBadge.js
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── .env.example
├── package.json
├── vite.config.js
├── tailwind.config.js
├── postcss.config.js
├── vercel.json
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• npm or yarn
• MetaMask browser extension
• Base Sepolia configured

---

1️⃣ Clone Repository

git clone https://github.com/yourusername/gasless-badge.git
cd gasless-badge

---

2️⃣ Install Dependencies

npm install

---

3️⃣ Configure Environment Variables

copy .env.example .env

VITE_REOWN_PROJECT_ID=your_project_id
VITE_CONTRACT_ADDRESS=0xYourContractAddress
VITE_RPC_URL=https://sepolia.base.org

---

4️⃣ Deploy Smart Contract

cd contracts
npm install

PRIVATE_KEY=your_private_key
RPC_URL=https://sepolia.base.org

Deploy:

npm run deploy

---

5️⃣ Start Development Server

npm run dev

Open:

http://localhost:5173

---

⛽ UGF Integration

User clicks Claim Badge
        ↓
UGF modal opens
        ↓
Gas quoted in Mock USD
        ↓
User approves transaction
        ↓
UGF handles blockchain gas
        ↓
NFT minted successfully

---

🚢 Deployment

npm install -g vercel
vercel

Built with ❤️ using React, Solidity, UGF & Base Sepolia