Quiz3

🎯 Quiz3 - Web3 Knowledge Arena

A comprehensive Web3 trivia dApp built on the Aptos blockchain, featuring mobile-first design and vibrant gradient UI.

📱 Live Demo

🎮 Try Quiz3 Now | 📚 View Documentation

🎮 Application Overview

Quiz3 is a cutting-edge Web3 trivia application that combines education with gamification. Built on the Aptos blockchain, it offers an immersive learning experience for Web3 enthusiasts through interactive quizzes, real-time leaderboards, and APT token rewards.

📱 Mobile-First Design

Quiz3 Mobile App

Quiz3 - Web3 Knowledge Arena: Mobile-first design with vibrant gradients and intuitive user experience

Key Features:

🏠 Homepage: Clean category selection with real-time timer and wallet integration

🎯 Quiz Interface: Interactive questions with category-specific theming and 15-second countdown

📚 Educational Resources: Comprehensive learning guides covering all quiz topics

🏆 Leaderboard: Real-time rankings and weekly reward distribution

💰 Reward System: Secure APT token distribution based on performance

🔐 Wallet Connection: Multiple wallet options for seamless Web3 integration

4 Specialized Categories:

⚡ Aptos: High-performance blockchain technology

💰 DeFi: Decentralized finance protocols and strategies

🎨 NFT: Digital ownership and non-fungible tokens

🔒 Zero-Knowledge: Privacy-preserving cryptographic proofs

✨ Key Features

🎮 Game Mechanics

1. 4 Categories: Aptos ⚡, DeFi 💰, NFT 🎨, Zero-Knowledge 🔒
2. 10 Questions per Category: Comprehensive coverage of each topic
3. Timed Questions: 15 seconds per question with visual countdown
4. Smart Scoring: Base points + speed multiplier + streak bonus
5. Educational Integration: Learn from comprehensive articles
6. Weekly Races: Compete for APT rewards

🎨 UI/UX Design

1. Mobile-First: Responsive design optimized for mobile devices
2. Category-Specific Theming: Dynamic colors and gradients
3. Vibrant Gradients: Purple-blue-cyan color palette
4. PWA Support: Install as native mobile app
5. Micro-Animations: Smooth transitions and hover effects
6. Professional Typography: Inter font family for readability

⛓️ Blockchain Integration

1. Aptos Testnet: Smart contract deployment
2. Wallet Connection: Aptos Wallet Adapter integration
3. Season Management: On-chain merkle root verification
4. Reward Claims: Secure APT token distribution
5. Merkle Trees: Off-chain calculation, on-chain verification

🪙 NFT Rewards & Claim (Testnet)

• Reward Tiers: Per-category NFTs at thresholds
•    Bronze at 3,000 points
•    Gold at 5,000 points
• Progress Bar: Animated "fuel-like" progress towards 3,000 with a claim button that unlocks exactly at the threshold.
• Claim Modal: Displays claimable NFTs with names, rarity, and images (SVG assets under frontend/public/nfts).
• Real Blockchain TX (Testnet): Uses @aptos-labs/wallet-adapter-react + @aptos-labs/ts-sdk to build, sign, submit, and confirm transactions on Aptos Testnet.
• Explorer Link: Transactions can be viewed at https://explorer.aptoslabs.com/txn/{TX_HASH}?network=testnet.
• Faucet: For testing, get APT at https://aptos.dev/network/faucet.

Wallet adapter configuration explicitly targets testnet:

 <AptosWalletAdapterProvider
 autoConnect
  dappConfig={{
    network: Network.TESTNET,
    aptosConnectDappId: "quiz3-trivia-game",
  }}
>
  {/* ... */}
</AptosWalletAdapterProvider>

NFT claim flow (summary):

1. Check points and claimable NFTs.
2. Open modal and select an eligible NFT (e.g., Bronze at 3,000 points).
3. Sign and submit a testnet transaction; display explorer link on success.

Assets:

1. SVGs for each category/rarity live at frontend/public/nfts/* (e.g., aptos-bronze.svg, defi-gold.svg, etc.).

🧠 Earning Points

1. Quizzes: Points are awarded upon completion based on performance.
2. Articles: Reading an educational article grants +200 points once per article when the reader scrolls to the end (persisted via localStorage).
3. Development Helper (Dev Only): A hidden progress-bar test button can grant +200 test points once per session to quickly test the claim flow in development builds.

🏗️ Technical Architecture

Frontend Stack

1. React 18: Modern component-based architecture
2. Vite: Lightning-fast build tool and dev server
3. TypeScript: Type-safe development
4. Tailwind CSS: Utility-first styling with custom design system
5. Aptos SDK v2: Latest blockchain interaction library

Smart Contract

1. Move Language: Resource-oriented programming
2. Season Management: Create and manage quiz seasons
3. Merkle Proofs: Secure reward distribution
4. Anti-Double-Claim: Built-in protection mechanisms

Design System

1. Color Palette: Category-specific gradients and themes
2. Components: Reusable UI components with consistent styling
3. Animations: Smooth transitions and micro-interactions
4. Accessibility: High contrast and large touch targets

📸 Screenshots

The README features a comprehensive mobile screenshot showcasing the Quiz3 application's key features and user interface.

Main Screenshot

📱 Mobile App Overview: Complete application interface showing homepage and category selection

🚀 Quick Start

Prerequisites

1. Node.js (v18+)
2. Aptos CLI
3. Git

Installation

1.Clone the repository

git clone https://github.com/0xumutkk/quiz3-dapp.git
cd quiz3-dapp

2.Install frontend dependencies

cd frontend
npm install

3.Start development server

npm run dev

4.Build for production

npm run build

Smart Contract Deployment

1.Compile the contract

cd contract
aptos move compile --named-addresses trivia_game=default

2.Deploy to testnet

aptos move publish --named-addresses trivia_game=default

📁 Project Structure

quiz3-dapp/

├── frontend/                 # React frontend application

│   ├── src/

│   │   ├── components/       # Reusable UI components

│   │   │   ├── CategoryCard.tsx

│   │   │   ├── QuizTimer.tsx

│   │   │   ├── QuizQuestion.tsx

│   │   │   └── WalletButton.tsx

│   │   ├── pages/           # Main application pages

│   │   │   ├── HomePage.tsx

│   │   │   ├── QuizPage.tsx

│   │   │   ├── ResultsPage.tsx

│   │   │   ├── ArticlePage.tsx

│   │   │   ├── LeaderboardPage.tsx

│   │   │   └── ClaimPage.tsx

│   │   ├── lib/             # Utilities and Aptos config

│   │   │   ├── aptos.ts

│   │   │   ├── utils.ts

│   │   │   ├── view-functions/

│   │   │   ├── entry-functions/

│   │   │   └── merkle-tree.ts

│   │   ├── data/            # Question data and content

│   │   │   ├── questions.ts

│   │   │   └── articles.ts

│   │   └── types/           # TypeScript definitions

│   ├── public/              # Static assets and PWA files

│   └── package.json

├── contract/                # Move smart contract

│   ├── sources/

│   │   └── trivia_game.move # Main contract logic

│   └── Move.toml

├── .gitignore

└── README.md

🎯 Game Flow

1. Connect Wallet: Use Aptos wallet adapter for Web3 integration
2. Select Category: Choose from 4 specialized Web3 topics
3. Answer Questions: 10 questions per session, 15s each
4. View Results: See score breakdown and performance analytics
5. Educational Content: Access articles if score < 6/10
6. Claim Rewards: Top performers earn APT tokens weekly

🏆 Scoring System

Point Calculation

1. Base Score: 100 points per correct answer
2. Speed Multiplier: 0.5 + 0.5 × (time_left / 15)
3. Streak Bonus: +10 × min(5, consecutive_correct)
4. Wrong Answer: 0 points, resets streak
5. Tie Breaker: Total response time

Reward Tiers

• 1st Place: 2,000 APT
• 2nd Place: 1,200 APT
• 3rd Place: 800 APT
• Top 10: 100 APT
• Participation: Variable based on performance

🛠️ Development Scripts

# Frontend Development
npm run dev          # Start development server (localhost:5174)
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint


# Smart Contract
npm run move:compile # Compile Move contract
npm run move:test    # Run Move tests
npm run move:publish # Deploy to testnet

🔧 Configuration

Environment variables in /frontend/.env:

VITE_MODULE_ADDRESS="0x1"  # Contract address after deployment
VITE_APP_NETWORK="testnet"
VITE_NODE_URL="https://fullnode.testnet.aptoslabs.com/v1"

🎨 Design System

Color Palette

1. Aptos: Purple gradients with lightning accents
2. DeFi: Green gradients with money bag icons
3. NFT: Pink gradients with artist palette icons
4. ZK: Orange gradients with lock icons

Typography

1. Display Font: Inter (headings and titles)
2. Body Font: Inter (content and descriptions)
3. Caption Font: Inter (metadata and labels)

Components

• Rounded Cards: 2xl border radius with subtle shadows
• Gradient Buttons: Interactive hover states with smooth transitions
• Progress Bars: Animated timer displays with category colors
• Educational Cards: Slide-up animations with comprehensive content

📱 PWA Features

1. Offline Support: Service worker caching for core functionality
2. Install Prompt: Add to home screen for native app experience
3. Native Feel: Full-screen mobile experience with app-like navigation
4. Background Sync: Future feature for offline quiz completion

🔒 Security Features

1. Merkle Proofs: Secure reward verification without revealing all data
2. Anti-Double-Claim: Contract-level protection against duplicate claims
3. Server-Side Timing: Prevent client-side manipulation of quiz timing
4. Rate Limiting: Anti-cheat mechanisms for fair competition
5. Wallet Verification: Ensure legitimate wallet connections

📊 Performance Metrics

1. Build Size: ~5.5MB (optimized with code splitting)
2. Load Time: <2s on 3G networks
3. Lighthouse Score: 95+ across all metrics
4. Mobile Performance: Optimized for 60fps animations

🤝 Contributing

We welcome contributions! Please follow these steps:

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

Development Guidelines

Follow TypeScript best practices

Maintain mobile-first responsive design

Test on multiple devices and browsers

Update documentation for new features

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

1. Aptos Labs: For the incredible blockchain platform and developer tools
2. Move Language: For secure and efficient smart contract development
3. React Community: For the amazing ecosystem and libraries
4. Web3 Community: For inspiration, feedback, and collaboration

Try Quiz3 Now!