Enterprise-grade infinite element synthesis game with multi-language support, cloud sync, and extensible architecture.
🚨 生产环境问题？ 如果遇到 Vision API、登录认证或 Vercel 访问限制问题，请查看 生产环境问题修复指南
- 🤖 AI-Powered Synthesis - Generate unique elements using multiple AI providers
- 🎨 Pixar-Inspired Design - Beautiful gradient-based UI with Disney/LEGO aesthetics
- 🎯 Drag & Drop System - Smooth interactions powered by dnd-kit
- 💾 Hybrid Storage - IndexedDB (local-first) + Supabase (cloud sync)
- 🌐 Multi-Language - Support for English, 中文, 日本語, and more
- 📱 Fully Responsive - Optimized for Mobile, Tablet, and Desktop
- ⚡ High Performance - Optimized for 60fps animations
- 🔐 Supabase Auth - Complete authentication system
- 🔄 Real-time Sync - Multi-device synchronization
- 🎭 Special Elements - Frames, Emotions, T-Shirts, Healing Cards
- 🧩 Extensible Prompts - Multiple AI prompt strategies
- 🎨 Plugin Architecture - Easy to extend with new element types
- 🌓 Dark/Light Mode - Beautiful themes for day and night
- Framework: Next.js 15 (App Router)
- Language: TypeScript 5.8+
- Styling: Tailwind CSS
- State Management: Zustand 5
- Animations: Framer Motion
- DnD: @dnd-kit
- i18n: next-intl
- Database: Supabase (PostgreSQL)
- Auth: Supabase Auth
- Storage: Supabase Storage
- Realtime: Supabase Realtime
- OpenAI (GPT-4, DALL-E)
- Anthropic (Claude)
- Google Gemini
- Doubao (字节跳动)
- Node.js 20+
- pnpm 9+
- Supabase account
# 1. Install dependencies
pnpm install
# 2. Setup database (automated)
pnpm db:setup:local
# This will:
# - Start local Supabase in Docker
# - Create database tables
# - Apply migrations
# - Generate TypeScript types
# 3. Copy environment variables
cp env.example .env.local
# 4. Edit .env.local with your credentials
# Minimum required:
# - NEXT_PUBLIC_AIKIT_API_KEY (or other AI provider)
# - NEXT_PUBLIC_SUPABASE_URL (auto-generated by db:setup)
# - NEXT_PUBLIC_SUPABASE_ANON_KEY (auto-generated by db:setup)
# 5. Start development server
pnpm dev# 1. Deploy database to Supabase Cloud
pnpm db:setup:production
# 2. Deploy to Vercel
vercel --prod
# 3. Configure environment variables in Vercel DashboardSee Quick Start Guide for detailed steps.
# Local development
pnpm db:setup:local
# Production deployment
pnpm db:setup:production# Start local Supabase
pnpm supabase:start
# Apply migrations
pnpm db:migrate
# Generate types
pnpm supabase:types- ✅ PostgreSQL 15
- ✅ Row Level Security (RLS) enabled
- ✅ Automatic migrations
- ✅ TypeScript type generation
- ✅ Local-first with cloud sync
See Database Setup Guide for details.
infinite-craft-next/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── [locale]/ # Internationalized routes
│ │ └── api/ # API routes
│ ├── components/ # React components
│ ├── lib/ # Core libraries
│ │ ├── auth/ # Authentication
│ │ ├── storage/ # Hybrid storage
│ │ ├── i18n/ # Internationalization
│ │ ├── prompt-engine/ # Prompt system
│ │ ├── elements/ # Element registry
│ │ └── model-runtime/ # AI providers
│ ├── store/ # State management
│ ├── hooks/ # Custom hooks
│ └── types/ # TypeScript types
├── supabase/ # Database schema
├── messages/ # Translation files
└── public/ # Static assets
- Start with Basic Elements - Water 💧, Fire 🔥, Wind 🌬️, Earth 🌍
- Drag to Combine - Drag elements onto each other to synthesize
- Discover New Elements - AI generates unique combinations
- Collect & Create - Build your element collection
- Special Elements - Use frames to create masterpieces
- 🇺🇸 English (en)
- 🇨🇳 简体中文 (zh-CN)
- 🇯🇵 日本語 (ja)
- Create translation file in
messages/[locale].json - Add locale to
src/lib/i18n/config.ts - Restart server
Application
↓
HybridStorage
├── IndexedDB (Local-first)
│ - Fast reads
│ - Offline support
│ - Optimistic updates
└── Supabase (Cloud sync)
- Multi-device
- Real-time
- Backup
// Register custom strategy
promptEngine.registerStrategy('custom', {
id: 'custom',
template: customTemplate,
plugins: ['educational', 'localization']
});// Register new element type
elementRegistry.register('custom', CustomElement);pnpm dev # Start dev server
pnpm build # Build for production
pnpm start # Start production server
pnpm type-check # TypeScript check
pnpm lint # ESLint check
pnpm format # Format code# Setup
pnpm db:setup # Interactive setup wizard
pnpm db:setup:local # Setup local database
pnpm db:setup:production # Setup production database
# Migrations
pnpm db:migrate # Apply migrations (local)
pnpm db:migrate:production # Apply migrations (production)
pnpm db:migrate:create [name] # Create new migration
pnpm db:migrate:status # Check migration status
pnpm db:rollback # Rollback local database
# Supabase CLI
pnpm supabase:start # Start local Supabase
pnpm supabase:stop # Stop local Supabase
pnpm supabase:reset # Reset database
pnpm supabase:types # Generate TypeScript typespnpm check-env # Validate environment variablesSee .env.local.example for all available options.
Required:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY- At least one AI provider API key
- 📖 Deployment Guide
- 📖 Database Setup
- 📖 Backend Deployment Complete
- 📖 Vercel Setup
- 🚨 Production Issues Fix Guide - 必读：生产环境问题解决方案
- 📋 Production Fix Summary - 修复总结
Contributions are welcome! Please read CONTRIBUTING.md for details.
MIT License - see LICENSE for details.
- Inspired by neal.fun/infinite-craft
- Architecture patterns from lobe-chat
- Design philosophy from Pixar, Disney, and LEGO
Built with ❤️ using Next.js 15, Supabase, and AI