Inspiration

The MaxWin Simulator is inspired by classic arcade games and the thrill of simple gambling. The core idea was to create an engaging "double or nothing" experience within the experimental Reddit Devvit platform, pushing the boundaries of what's possible with its unique architecture. We aimed for a retro pixel-art aesthetic to evoke a sense of nostalgia and add a vibrant, playful feel to the game's intense mechanics.

What it does

Players start with a small balance and can choose to bet their entire current balance on a 50/50 chance to double it. The game tracks current balance, high score, total banked money, and win streaks. A key feature is the ability to "bank" current winnings, which saves the amount to a total banked sum and resets the session balance to $1.00, allowing players to start a new streak without losing their accumulated fortune. The game also features progressive visuals that change as players reach higher balance milestones, adding to the excitement.

How we built it

The MaxWin Simulator was built using a full-stack approach tailored for the Devvit platform:

• Client-side (Frontend):
  The interactive game interface is a React application, styled with custom CSS and leveraging Tailwind CSS for utility-first styling. Vite is used for the build process, providing a fast development experience. Animations are enhanced with @tweenjs/tween.js and custom CSS keyframe animations to create the vibrant, bouncy pixel aesthetic.

• Server-side (Backend):
  A Node.js Express server handles the game logic, including initializing user states, processing bets, and banking money. This server runs within the Devvit serverless environment.

• Data Persistence:
  Devvit's built-in Redis is used as the database to store and retrieve user game states (balance, high score, banked total, streaks) persistently.

• Devvit Integration:
  The Devvit SDK is used to create the Reddit-facing application, including a menu item to create new game posts and a preview component for the Reddit feed. The client-side application communicates with the server-side via standard fetch API calls.

Challenges we ran into

Building on an experimental platform like Devvit presented several unique challenges:

• Platform Specifics:
  Understanding the distinct environments of the Devvit app, client webview, and serverless backend, and how they communicate, required careful architectural planning.

• Debugging:
  The sandboxed nature of the Devvit environment and the separation of concerns between client and server made debugging complex, especially when backend requests didn't work in the Bolt preview window, necessitating testing directly on a Reddit subreddit.

• Limited External Services:
  The constraint of using only Devvit's Redis for backend storage meant adapting our data persistence strategy to a key-value store, rather than a traditional relational database like Supabase.

Accomplishments that we're proud of

We are particularly proud of:

• Seamless Full-Stack Integration:
  Successfully building a cohesive full-stack application that leverages Devvit's unique architecture for both frontend and backend logic.

• Engaging User Experience:
  Creating a visually dynamic and highly animated retro pixel-art interface that enhances the game's excitement and keeps players engaged.

• Robust Game Logic:
  Implementing a clear and functional game loop with persistent state management for betting, banking, and tracking player statistics.

What we learned

This project provided valuable insights into:

• Devvit Platform Capabilities:
  A deep understanding of how to develop, deploy, and manage applications within the Reddit Devvit ecosystem, including its serverless functions and Redis integration.

• Serverless Architecture:
  Best practices for managing state and handling requests in a serverless Node.js environment.

• Client-Server Communication:
  Effective patterns for secure and efficient data exchange between a React frontend and a Node.js backend within a constrained environment.

• Experimental Development:
  The process of working with an evolving platform, adapting to its limitations, and leveraging its unique strengths.

What's next for MaxWin Simulator

For the MaxWin Simulator, potential next steps include:

• Leaderboards:
  Implementing global or subreddit-specific leaderboards to foster competition among players.

• More Game Modes:
  Introducing additional gambling mechanics or mini-games to diversify gameplay.

• Enhanced Visuals & Sound:
  Further refining the pixel art, adding more dynamic animations, and incorporating sound effects to heighten the immersive experience.

• User Profiles:
  Exploring more detailed user profiles to track long-term statistics and achievements beyond just high scores.

Built With

• bolt
• css
• devvit
• html
• javascript
• node.js
• react
• redis
• typescript
• vite
• yaml