TOTO Magic: Project Story

Inspiration

We were inspired by the classic arcade fortune-telling machine, "Zoltar", and wanted to bring this dash of magic to an interactive web experience. The idea blossomed into creating TOTO Magic—a Telegram mini app that captures nostalgic charm in a fun, social gaming environment where players earn coins toward an airdrop of real value-backed cryptocurrency.
Our vision expanded from our broader ecosystem called the Lilypad, where we aim to host a web3 connective blockchain gaming arcade.

What it does

TOTO Magic is a mini app within Telegram that simulates a fortune-telling and wish-granting machine. Players can:

  • Authenticate seamlessly inside Telegram
  • Make Wishes for rewards and fortunes
  • Invite Friends to earn extra wishes (referral system)
  • Access multiple tabs: a shop (in progress), a leaderboard, a social/invite page, and the core wishing game
  • Quests, viral social quests, by performing simple tasks such as Follows, and collabs with other successful projects
  • Play-to-Earn coins that add up to a real airdrop of value of crypto
  • Redeem Bonus Coins or Earn Additional Wishes interactive elements in the "Social" tab give players the opportunity to earn and play more

How we built it

  1. Frontend:
    • HTML, CSS, JavaScript for the core interface
    • Integrated with Telegram Web Apps for inline usage and theming
  2. Backend:
    • Python + Flask as the primary framework
    • SQLite (prototype) and migrated to MySQL for production concurrency
    • Gunicorn & Systemd handle process management on Amazon EC2 instances
  3. Amazon Q for Visual Studio
    • Code Review and Security: Amazon Q integration within Visual Studio for code analysis and security scanning
    • Best Practices: Amazon Q was like our virtual coding assistant - highlighting potential vulnerabilities (like concurrency misconfigurations or missing validations) and suggesting improvements in real time.
  4. Infrastructure:
    • AWS EC2 for hosting both the application and Lilypad environment
    • Nginx as a reverse proxy between cPanel and our EC2 backend
    • Telegram Bot API to handle game commands and messages

Challenges we ran into

  1. Concurrent Database Writes: As player counts rose, SQLite would show database locked errors. Migrated to MySQL for better concurrency.
  2. Referral System Bugs: Multiple invites from the same user were incorrectly granting additional credits, requiring refined tracking logic. We introduced robust checks to ensure each referral ID is only used once per user.
  3. Mobile Authentication Hurdles: Some Android users struggled to authenticate. Debugging the Telegram inline mini app flow demanded careful log analysis.
  4. Styling Consistency: Balancing a uniform UI across inline Telegram mode vs. full-screen usage required responsive design considerations.
  5. Server Reboots & Log Monitoring: Using systemd & journalctl effectively was crucial to catch errors in real time and ensure continuous uptime.

Accomplishments that we're proud of

  • Functional Telegram Mini App: A smooth in-app experience for TOTO Magic inside Telegram.
  • Referrals & Social Engagement: Laying a foundation for a robust invite and friend-based bonus system.
  • Polished Design: Built to be minimal, fast, and work seamlessly across devices (Android & iOS and a myriad of screen sizes), all styling and UI also follows Telegram's specific styling etiquette
  • Dynamic Wish Refills: Implemented a timer-based mechanic with eight-hour refill intervals, refilling seamlessly with the performance of various quests, and daily reminders to players when their wishes are filled
  • Scalable AWS Deployment: Learned to configure AWS resources with a focus on concurrency reliability, and security. Telegram’s inline mini-app flow and AWS’s scaling (EC2, Load Balancer) come together to create a smooth user experience under high load
  • Playerbase, Collaborations, and Integrations: Our app has attracted over 39,000 players in the first month of our public release, and we nailed a Collab Quest with another successful project. Not to mention, our app recently began generating revenue with integrated ads

What we learned

  • Anticipate Growth: Even small-scale games can quickly face concurrent writes. Planning early for a robust database is vital.
  • Telegram Web App Integration: Understanding inline vs. full-screen flow and theme parameters taught us a lot about client-side user experiences.
  • Deeper Debugging: Reading system logs (journalctl) and analyzing concurrency issues thoroughly was a new learning curve.
  • Consistent Theming & Layout: Managing a single codebase for varying display modes required conscientious CSS and JavaScript architecture.

What's next for TOTO Magic

  1. Feature Expansions: A more advanced shop, more daily and social quests, seasonal events. A "season 2" overhaul with a fully animated main character, additional mini games, and on-chain NFTs integrated into the "Shop" tab - earned with in-game coins.
  2. Lilypad Ecosystem Growth: Host multiple blockchain connective games under one shared umbrella, becoming a web3 games arcade

Built With

Share this project:

Updates

Submission history