Bakamoto’s Counter Clash

About BakaCounter Inspiration: 💡

This project started with the idea of creating a game inspired by the stylish action of the Sakamoto Days anime, adapted for the unique environment of Reddit apps. We analyzed Reddit's core design principles for apps built with Devvit – emphasizing bite-sized gameplay, feed visibility, daily engagement (content flywheels), and asynchronous play. This led us to pivot from a complex level-based game to a focused, daily reaction game. The core concept became "BakaCounter," where players act as a clerk stylishly countering assassins with everyday shop items, competing on a daily leaderboard.

What I Learned: 📚

Building BakaCounter was a deep dive into the Devvit SDK and its specific requirements. Key learnings included:

Devvit Architecture: Understanding the client/server model, how the server (src/server/main.ts) generates data (like our daily seed) and loads the client (src/client/App.tsx) as a WebView.

Build Configuration: Configuring Vite (vite.config.ts) for both client and server bundles, especially the nuances of externalizing packages (@devvit/public-api, React) to avoid build errors (Rollup failed, Cannot find module).

Debugging Devvit: Troubleshooting a range of common issues, from environment problems (EADDRINUSE, npm cache/dependency conflicts) to runtime crashes (Installation failed, white screens) by systematically analyzing logs and isolating problems.

Daily Challenge Logic: Implementing a deterministic daily challenge using a date-based seed and a Pseudo-Random Number Generator (PRNG) to ensure fairness for the leaderboard.

React State Management: Building the core game loop, handling user input, managing state (useState, useEffect), and adding "juice" (visual feedback, animations) within a React component.

How I Built It: 🛠️

We followed an iterative, step-by-step process:

Design: Created a Game Design Document outlining the core concept, gameplay loop, and features, ensuring alignment with Devvit principles.

Prototyping: Built the core game mechanics in a single React component (src/client/App.tsx).

Integration: Set up the Devvit server (src/server/main.ts) to calculate the daily seed and load the client app using context.ui.webView.

Data Flow: Implemented the client entry point (src/client/main.tsx) using useData to receive the seed from the server and handle the loading state.

Configuration & Debugging: Spent significant time configuring vite.config.ts for both client and server, resolving numerous build and runtime errors through careful analysis and environment resets (npm cache clean, npm install).

Refinement: Added game feel elements (feedback text, screen shake) and structured the code for clarity.

The process involved careful debugging and a willingness to restart the project setup when configuration issues became too complex, ultimately leading to a stable and functional build.

Built With

• built-with-the-devvit-sdk
• react
• tailwind-css
• typescript
• vite