Web3 Battle Series • Parabolic DAO

Championship Categories

The Web3 Battle Series features seven unique championship belts, each representing a different pillar of the blockchain ecosystem:

• THE SILICON SOVEREIGN - AI & Data Excellence
• LIQUIDITY LEGEND - DeFi Innovation
• METAVERSE MONARCH - GameFi & Metaverse Leadership
• INFRASTRUCTURE ICON - L1/L2 Infrastructure
• CULTURE CHAMPION - Memecoins & Community
• VALUE VELOCITY - Payment Solutions
• PEGGED POWERHOUSE - Stablecoins

Features

• Web3 Integration - Seamless wallet connection using Thirdweb SDK v5
• NFT Gallery - Browse all championship belts with immersive 3D effects
• NFT Claiming - Claim championship NFTs directly to your wallet
• NFT Dashboard - View and manage your owned NFT belts
• Responsive - Fully responsive design optimized for all devices
• Interactive UI - Floating animations, hover effects, and smooth transitions

Technology Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Web3 Integration: Thirdweb SDK v5
• Styling: TailwindCSS with custom CSS animations
• Fonts: Inter & Orbitron from Google Fonts
• Icons: Font Awesome 6

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• A Web3 wallet (e.g., MetaMask, Coinbase Wallet)

Installation

1. Clone the repository

   git clone https://github.com/mikky69/web3-battle-series.git
   cd web3-battle-series

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory and add your configuration:

   VITE_TEMPLATE_CLIENT_ID=your_thirdweb_client_id
   VITE_TEMPLATE_NFT_CONTRACT_ADDRESS=your_nft_contract_address

   Note: Get your Thirdweb Client ID from the Thirdweb Dashboard

Usage

Development Mode

Run the development server:

npm run dev

The application will be available at http://localhost:5173

Build for Production

Create an optimized production build:

npm run build

Preview Production Build

Preview the production build locally:

npm run preview

How to Use the Platform

1. Connect Your Wallet

   • Click the "Connect Wallet" button in the header
   • Select your preferred wallet provider
   • Approve the connection request

2. Browse Championship Belts

   • Navigate to the "NFT BELTS" section
   • Explore the seven championship categories
   • Click on any belt to view details

3. Claim NFT Belts

   • Select the belt you want to claim
   • Click the "Claim Now" button
   • Confirm the transaction in your wallet
   • Wait for the transaction to complete

4. View Your Collection

   • Access "Your Belts" section
   • See all NFTs you've claimed
   • View belt details and metadata

Blockchain Integration

This project leverages Thirdweb SDK v5 for seamless Web3 functionality:

• Smart contract interactions
• NFT minting and claiming
• Wallet connection management
• Transaction handling
• Blockchain data queries

License

This project is licensed under the MIT License.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Author

Parabolic DAO

• Twitter: @0xParabolicDAO
• GitHub: @mikky69