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

# Showcase

> Production applications built with InsForge

export const ServiceIcons = ({services}) => {
  const iconMap = {
    database: {
      src: '/images/icons/database.svg',
      title: 'Database'
    },
    auth: {
      src: '/images/icons/auth.svg',
      title: 'Authentication'
    },
    storage: {
      src: '/images/icons/storage.svg',
      title: 'Storage'
    },
    ai: {
      src: '/images/icons/ai.svg',
      title: 'AI Services'
    },
    functions: {
      src: '/images/icons/function.svg',
      title: 'Edge Functions'
    }
  };
  return <div className="flex gap-2 mt-3" style={{
    pointerEvents: 'none'
  }}>
      {services.map(service => {
    const icon = iconMap[service.toLowerCase()];
    return icon ? <img key={service} src={icon.src} alt={icon.title} title={icon.title} className="w-5 h-5 opacity-70" style={{
      pointerEvents: 'none'
    }} /> : null;
  })}
    </div>;
};

See what developers are building with InsForge - from AI-powered SaaS to social platforms and beyond.

## Community Projects

<CardGroup cols={2}>
  <Card title="National Flags Leaderboard" icon="flag" href="https://national-flags-phi.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/national-flags.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=8507df26d9eacb43c43be62e298eb4d2" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="National Flags Leaderboard showcase" width="1600" height="900" data-path="showcase/national-flags.png" />
    </div>

    Learn national flags through an interactive database and take on challenges with real-time leaderboard rankings.

    <ServiceIcons services={['database', 'auth', 'storage', 'ai', 'functions']} />
  </Card>

  <Card title="Pokemon Vibe" icon="wand-magic-sparkles" href="https://pokemon-vibe.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/pokemon-vibe.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=f4400158feb6bdd7d9d69a49348d5e69" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="Pokemon Vibe showcase" width="1600" height="900" data-path="showcase/pokemon-vibe.png" />
    </div>

    Form your own Pokemon teams and compete against others. AI-powered battles let two teams fight on top of AI-generated drawings.

    <ServiceIcons services={['database', 'auth', 'storage', 'ai', 'functions']} />
  </Card>

  <Card title="2048 Arena" icon="gamepad" href="https://insforge-2048-arena.netlify.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/2048-arena.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=ba75d66802c050986700db2b5201b26c" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="2048 Arena showcase" width="1600" height="900" data-path="showcase/2048-arena.png" />
    </div>

    Classic 2048 puzzle game with multiplayer arena and competitive leaderboards.

    <ServiceIcons services={['database', 'auth']} />
  </Card>

  <Card title="Line Connect Race" icon="route" href="https://line-connect-race.vercel.app/">
    <div style={{maxHeight: '192px', height: '192px', overflow: 'hidden', borderRadius: '0.5rem', pointerEvents: 'none'}}>
      <img src="https://mintcdn.com/insforge-468ccf39/ASZDAmWg97F3HceI/showcase/line-connect-race.png?fit=max&auto=format&n=ASZDAmWg97F3HceI&q=85&s=d22cd12a1a3f87bca9b1f7505d388f94" style={{width: '100%', height: '192px', objectFit: 'cover', pointerEvents: 'none'}} alt="Line Connect Race showcase" width="1600" height="900" data-path="showcase/line-connect-race.png" />
    </div>

    Interactive line-drawing racing game with real-time multiplayer and competitive gameplay.

    <ServiceIcons services={['database', 'auth', 'functions']} />
  </Card>
</CardGroup>