MysteryBox.Cards

MysteryBox.cards lets you open digital boxes, collect rare cards, and unlock mini-games. Build your collection, earn rewards, and play daily in this fun, strategic card-based experience.

Comment

✨ Inspiration

We set out to recreate the excitement of collecting and opening mystery boxes—bringing it into the browser in a fun, strategic, and visually rich way. We wanted to mix digital collectibles with daily gameplay loops that reward curiosity and consistency.

🧩 What it does

MysteryBox.Cards lets users open mystery boxes to reveal digital trading cards of various rarities. After collecting 15+ unique cards, players unlock access to three original mini-games where they can earn XP, badges, and new rare cards. It’s designed for quick daily play and long-term collection building.

🛠 How we built it

  • Frontend: React with responsive design for web + mobile
  • Backend: Node.js + Express for game logic and API routes
  • Database & Auth: Supabase for real-time data and secure user auth
  • Payments: Stripe for subscriptions and token packs
  • Card Art: 180 cards generated using Stable Diffusion, styled and curated manually
  • Admin Tools: React-based panel for managing cards, drops, rarity tuning, and events

🧱 Challenges we ran into

  • Curating a clean, fun card set using AI-generated assets
  • Ensuring fairness in card rarity distribution
  • Designing mini-games that are simple yet rewarding
  • Building a flexible admin system for future sets and events

🏆 Accomplishments that we're proud of

  • Shipped a fully playable collectible card game in under a month
  • Designed and generated 180 unique cards with AI art
  • Created 5 distinct, unlockable mini-games
  • Built an admin panel to support new card drops and rarity tuning

📚 What we learned

  • Stable Diffusion can speed up creative asset pipelines
  • Supabase makes building secure, real-time apps incredibly fast
  • Simplicity in design drives user retention
  • Strategic collection mechanics can be fun without being overwhelming

🚀 What's next for MysteryBox.Cards

  • Add async PvP card battles
  • Launch seasonal content and timed rarity events
  • Introduce card fusion and crafting
  • Enable trading and community features
  • Release mobile PWA + native app versions for wider reach

Built With

Share this project:

Updates