> ## Documentation Index
> Fetch the complete documentation index at: https://dubhe.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Tutorials Overview

> Learn by building - from simple DApps to complex on-chain games

<div className="tutorials-hero">
  <h1>📚 Learn Dubhe Step by Step</h1>

  <p className="hero-text">
    Master blockchain development through hands-on tutorials designed for all skill levels
  </p>
</div>

## 🎯 Choose Your Learning Path

<Tabs>
  <Tab title="🌱 Beginner">
    <CardGroup cols={2}>
      <Card title="Your First DApp" icon="baby" href="/tutorials/first-dapp">
        **30 minutes** • Build a counter app with multiplayer features
      </Card>

      <Card title="Setting Up Development" icon="laptop-code" href="/tutorials/contract-development/setting-up-a-project">
        **15 minutes** • Configure your development environment
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="🚀 Intermediate">
    <CardGroup cols={2}>
      <Card title="Contract Development" icon="file-contract" href="/tutorials/contract-development">
        **1 hour** • Deep dive into Move smart contracts
      </Card>

      <Card title="Frontend Integration" icon="window" href="/tutorials/how-to-query-with-client/query-with-client">
        **45 minutes** • Build reactive UIs with real-time data
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="🎮 Advanced">
    <CardGroup cols={2}>
      <Card title="Monster Hunter Game" icon="dragon" href="/tutorials/monster-hunter">
        **2 hours** • Build a complete on-chain RPG
      </Card>

      <Card title="Contract Migration" icon="arrows-up-down" href="/tutorials/contract-migration">
        **1 hour** • Upgrade contracts without losing state
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

## 🛠️ Featured Tutorials

<CardGroup cols={1}>
  <Card title="🎮 Build an On-Chain Game" href="/tutorials/monster-hunter">
    <div className="featured-card">
      <div className="featured-content">
        <h3>Monster Hunter: Complete Game Tutorial</h3>
        <p>Learn advanced concepts by building a fully on-chain RPG game with:</p>

        <ul>
          <li>✅ Combat system with damage calculation</li>
          <li>✅ Inventory and item management</li>
          <li>✅ NFT-based characters and equipment</li>
          <li>✅ Multiplayer interactions</li>
          <li>✅ Real-time state synchronization</li>
        </ul>

        <div className="featured-tags">
          <span className="tag advanced">Advanced</span>
          <span className="tag long">2-3 hours</span>
          <span className="tag popular">Most Popular</span>
        </div>
      </div>
    </div>
  </Card>
</CardGroup>

## 📖 Tutorial Series

### 🏗️ Contract Development Series

<Steps>
  <Step title="Project Setup">
    [Setting up a project](/tutorials/contract-development/setting-up-a-project) - Initialize and configure your Dubhe project
  </Step>

  <Step title="Local Development">
    [Start a local node](/tutorials/contract-development/start-a-local-node) - Run a blockchain locally for testing
  </Step>

  <Step title="Contract Logic">
    [Develop contracts](/tutorials/contract-development/develop) - Write Move smart contracts with ECS
  </Step>

  <Step title="Testing">
    [Test your code](/tutorials/contract-development/test) - Unit and integration testing strategies
  </Step>

  <Step title="Deployment">
    [Publish to network](/tutorials/contract-development/publish) - Deploy to testnet and mainnet
  </Step>
</Steps>

### 🎨 Frontend Development Series

<Accordion title="Building User Interfaces">
  Learn how to create responsive, real-time frontends for your on-chain applications:

  1. **Client SDK Setup** - Initialize and configure the Dubhe client
  2. **Reading State** - Query on-chain data efficiently
  3. **Sending Transactions** - Execute on-chain functions
  4. **Real-time Updates** - Subscribe to state changes
  5. **Error Handling** - Gracefully handle blockchain errors
</Accordion>

## 💡 Tutorial Format

Each tutorial follows a consistent structure for optimal learning:

<CardGroup cols={3}>
  <Card title="Prerequisites" icon="list-check">
    Clear requirements and setup instructions
  </Card>

  <Card title="Step-by-Step" icon="stairs">
    Detailed instructions with code examples
  </Card>

  <Card title="Complete Code" icon="code">
    Full source code available on GitHub
  </Card>
</CardGroup>

## 🏆 What You'll Learn

<div className="skills-grid">
  <div className="skill-category">
    <h3>🔧 Core Skills</h3>

    <ul>
      <li>Move language fundamentals</li>
      <li>ECS architecture patterns</li>
      <li>Schema-driven development</li>
      <li>On-chain state management</li>
    </ul>
  </div>

  <div className="skill-category">
    <h3>⚡ Advanced Topics</h3>

    <ul>
      <li>Gas optimization techniques</li>
      <li>Complex game mechanics</li>
      <li>Multi-chain deployment</li>
      <li>Upgrade strategies</li>
    </ul>
  </div>

  <div className="skill-category">
    <h3>🎯 Best Practices</h3>

    <ul>
      <li>Security considerations</li>
      <li>Testing methodologies</li>
      <li>Performance optimization</li>
      <li>Production deployment</li>
    </ul>
  </div>
</div>

## 📚 Additional Resources

<Info>
  **Need Help?** Each tutorial has:

  * 💬 **Discord Channel** - Get help from the community
  * 📹 **Video Walkthrough** - Visual learners welcome
  * 💻 **Live Examples** - Try before you build
  * 📝 **Cheat Sheets** - Quick reference guides
</Info>

## 🚀 Start Your Journey

<CardGroup cols={3}>
  <Card title="Absolute Beginner?" icon="seedling" href="/tutorials/first-dapp" color="#10b981">
    Start with your first DApp →
  </Card>

  <Card title="Know the Basics?" icon="rocket" href="/tutorials/contract-development" color="#3b82f6">
    Dive into contracts →
  </Card>

  <Card title="Ready for Games?" icon="gamepad" href="/tutorials/monster-hunter" color="#8b5cf6">
    Build Monster Hunter →
  </Card>
</CardGroup>

## 🎓 Certification

<Note>
  **Coming Soon!** Complete all tutorials to earn your **Dubhe Developer Certificate** 🏅

  Track your progress and showcase your skills to the community.
</Note>

<style>
  {`
    .tutorials-hero {
      background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
      padding: 3rem;
      border-radius: 1rem;
      text-align: center;
      color: white;
      margin-bottom: 2rem;
    }

    .hero-text {
      font-size: 1.25rem;
      margin-top: 1rem;
      opacity: 0.95;
    }

    .featured-card {
      padding: 1.5rem;
      background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      border-radius: 0.5rem;
    }

    .featured-content h3 {
      color: #1f2937;
      margin-bottom: 1rem;
    }

    .featured-tags {
      display: flex;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .tag {
      padding: 0.25rem 0.75rem;
      border-radius: 1rem;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .tag.advanced {
      background: #fef3c7;
      color: #92400e;
    }

    .tag.long {
      background: #dbeafe;
      color: #1e40af;
    }

    .tag.popular {
      background: #fce7f3;
      color: #9f1239;
    }

    .skills-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }

    .skill-category {
      padding: 1.5rem;
      background: #f9fafb;
      border-radius: 0.5rem;
      border: 1px solid #e5e7eb;
    }

    .skill-category h3 {
      margin-bottom: 1rem;
      color: #374151;
    }

    .skill-category ul {
      list-style: none;
      padding: 0;
    }

    .skill-category li {
      padding: 0.5rem 0;
      color: #6b7280;
      border-bottom: 1px solid #e5e7eb;
    }

    .skill-category li:last-child {
      border-bottom: none;
    }
    `}
</style>