The Project
What my project was intended to be?
The project aimed to create a Reddit game using the Devvit platform with the React framework. The game’s goal was to play drum beats accurately as they reached the play mark. If a player achieved over 90% accuracy, a challenge post would be generated for the community. The community would then create choreography for the beats using a 3D character model and its attached animations.
What my final project became?
The project successfully implemented the first phase. However, the challenge post concept evolved from choreography to a speed challenge (explained the pivot later). In the speed challenge, players replay the same beats as the original player but at a higher speed. If they complete the challenge with 90% accuracy or more, a new challenge post is created at an even faster tempo—continuing the chain.
TL;DR
Built a Reddit rhythm game using the Devvit platform and React with help from Kiro IDE. Overcame major hurdles in UI, scoring, and 3D integration, eventually pivoting to a speed challenge format. Learned to trust AI collaboration, iterate faster, and balance creativity with technical precision throughout the journey.
My Journey Sneak Peak
- Designing the app flow: Built a high-level navigation structure connecting the main game’s tabs and pages.
- Integrating drum beat audio: Created a drum kit folder with various sound files for each drum piece and imported them into the app.
- Developing the main game logic (UI challenges): Designed the game interface to display and detect drum hits as they reached the hit line, iterating through several UI adjustments along the way.
- Implementing the scoring system: Built the logic to detect hits, calculate scores, and measure player accuracy.
- Introducing the challenge post: Players achieving over 90% accuracy would trigger a community challenge post—inviting others to choreograph a 3D character dance to the same beats.
- Overcoming roadblocks and pivoting: When 3D models failed to load properly, the challenge concept evolved. The new version invited players to replay the same beats at a faster speed, competing for higher leaderboard scores.
- Final touches and documentation: Wrapped up with final fixes, polish, and thorough documentation of the entire project.
My Background
I’m primarily a Software Developer with a Bachelor’s degree in Software Engineering. Lately, I’ve been focusing my career on AI and Security—both individually and where they intersect. Over the past year, I’ve experimented with several of the new “vibe” coding tools that have entered the scene, each offering a unique experience. I’ve also worked with AWS Q, which integrates nicely with Visual Studio Code. It was solid—but when it comes to smoothness, Kiro takes the cake, the baker, and the whole bakery.
Why Kiro is better?
- Backed by Claude: I recently started using Claude, and out of all the AI tools I’ve tried, it consistently gets the job done faster, smoother, and with fewer prompts.
- Strong session management: Kiro seems to handle conversation memory exceptionally well, maintaining context more effectively and making problem-solving feel structured and streamlined.
- Smart session resets: Of course, even good session management has limits. I really appreciate that Kiro can summarize an old session and start a new one with the previous context intact. I’m sometimes skeptical about whether all details carry over, so I double-check and let it ask clarifying questions—but so far, it hasn’t missed a beat.
- Autopilot mode: I completed my entire project using Autopilot. Having used AWS Q before, I can say this feature works impressively well—especially coming from someone who usually doesn’t like others touching their code.
- Credit-friendly: This one surprised me. Kiro’s credit usage is actually quite reasonable, which makes it easy to keep using without constantly worrying about limits.
My Entire Journey in Detail...
1. Designing the app flow
I started by setting up the Devvit project and opening it in the Kiro IDE. The first task I gave Kiro was to remove the default code in App.tsx and create four tabs: Home, Join Game, Leaderboard, and Tutorial. Later, I restructured the layout into three tabs by merging Home and Join Game into a single page for better flow. I also added navigation logic and back buttons to enable smooth, circular navigation across the app.
2. Integrating drum beat audio
Next, I created a dedicated drum kit folder containing multiple sound files for each drum piece and imported them into the app. I then built a form that allowed players to assign different sounds to each drum component and adjust them before starting the game.
Initially, I placed the drum kit in the assets folder and asked Kiro to use it in the React app. What I didn’t realize was that assets was meant for backend (Express) code, not the React client. This led to repeated 401 and 404 errors. Kiro imeplemented the logic using the Web Audio API, but it didn’t provide the exact sounds I needed—and lacked variation among drum pieces.
Then it clicked: the audio files needed to be in the src/client folder for React to access them properly. Once that was fixed, Kiro generated a complete sound customization form that worked perfectly.
3. Developing the main game logic - UI Struggles and Changes
With the foundations in place, it was time to build the main game logic. The core idea was simple: the player matches drum beats to a background track. Visually, I imagined an old film reel or gramophone-style animation, where the sound waves move as if a pin were playing them.
Kiro and I tried several approaches. First, we attempted to simulate the motion using an audio wave image that updated every second. However, this approach distorted the image—compressing it instead of creating smooth movement. Then, we tried embedding a live waveform generated externally and animating it horizontally across a div. It initially looked promising, but responsiveness issues made it unreliable across different screen sizes. The animation moved inconsistently—sometimes too fast, sometimes too slow.
After numerous iterations and plenty of “this doesn’t work” moments, Kiro suggested generating a live audio waveform using math functions. But that produced a random sine wave unrelated to the actual sound. Eventually, I decided to start over—keeping the same context but wiping all code clean. I explained my full game vision to Kiro and let it ask clarifying questions.
Finally, I dropped my weapons. Luckily in retrospective view, we started new session with same context. I removed all the code from the file. I gave it a free reign. I explained my game to Kiro and allowed it question back to me.
Once it understood, Kiro implemented a new version from scratch. The first attempt was clunky—only background music played, and the visuals were overlapping. The beats initially moved horizontally, which didn’t work well across devices. I asked Kiro to make the beats fall vertically instead. The early results were jerky, but after several rounds of debugging and logic tuning, we finally achieved smooth, responsive beat animations.
4. Implementing the scoring system
Next came the scoring system — and with it, a few surprises. During testing, I noticed something odd: my game displayed Hits: 108/105 and Accuracy: 102.9%. Now, I know I’m good, but definitely not that good!
This revealed a flaw in the original scoring logic. After several rounds of debugging and back-and-forth with Kiro, we finally fixed the calculation so that accuracy stayed realistic.
However, a new issue emerged — saving scores triggered a 502 error, and fetching the leaderboard resulted in a 500 error. After a bit of investigation, Kiro discovered the culprit: Redis API changes. The latest documentation showed that some method names had been updated, for example:
redis.zadd() → redis.zAdd()
redis.zrevrange() → redis.zRevRangeWithScores()
redis.zremrangebyrank() → redis.zRemRangeByRank()
redis.zcard() → redis.zCard()
Also parameters and return formats were different:
redis.zadd(key, score, member) → redis.zAdd(key, { score: score, member: member })
['member1', 'score1', 'member2', 'score2'] (flat array) → [{member: 'member1', score: score1}, {member: 'member2', score: score2}] (object array)
5. Introducing the challenge post
With the core game logic complete, I decided to experiment with a challenge post feature. If it worked, great; if not, it could easily be removed. I asked Kiro for its opinion on the idea:
What do you think about this idea in terms of implementation. If a user scores above 98% accuracy we use the beats (the original list that they had to play) and create a new reddit post. Here we share the user who played the beats and their accuracy and we play the beats and the bg. I have fbx characters with different dance animation which I have added. Meaning a character model can do different dance animations. Another user can now use this new dance beats and arrange the dance animations as they like. So we only create a list of naimtion that plays one after the other on the beats. I know it can be done using react three fiber, I have done it seperately before, but do you think this is good viable idea for reddit game and implemention it well.
I already suspected it was a strong concept, and Kiro agreed—highlighting its potential for social gamification and adding a creative community layer. It also suggested an implementation plan involving beat saving, a dance choreography interface, and 3D character integration.
Kiro first built the challenge post logic, including the necessary initial data structure for each post. My next task was to source 3D character models from the free, open-source platform Mixamo and blend multiple animations using Blender. Once the models were ready, I imported them into the app.
Kiro attempted to render the three character models in a static pose—but the app failed to load entirely, running into multiple errors during startup.
6. Overcoming roadblocks and pivoting
I took a short pause—but not a stop. I discussed the next steps with Kiro, aiming to pivot and brainstorm new directions for the challenge feature. The first few ideas leaned more toward data visualization than actual gameplay. But then, Kiro proposed three creative renditions:
- Simple Head-on Challenge – Other players replay the same beats and try to outscore the original player.
- Remix Battle – Players reuse the beat sequence but swap out drum sounds to create their own remix.
- Speed Run – Players replay the same beat pattern at an increased tempo.
The third idea instantly clicked with me. I extended it further—what if, every time a player successfully completed the challenge with high accuracy, the next version became even faster, forming an ongoing speed loop?
After several rounds of iteration and debugging, Kiro and I got it working smoothly: each completed challenge now generates a new one with higher speed, keeping the gameplay endlessly engaging.
7. Final touches and documentation
The last stage was all about polish and cleanup. I focused on:
- Adding loading indicators
- Adjusting color themes
- Commenting out all debug console logs
- Refining button sizes and layout
- Handling Git fixes
- Writing and organizing project documentation
These final touches brought everything together—transforming the prototype into a complete, playable Reddit game.
My learnings
I realized that it’s often best to give free rein in the beginning. I tend to have a strong visual idea of what I want, which sometimes makes me dive too deep into details too early. But with an agentic IDE like Kiro, it’s far more effective to start broad—share the bigger vision first—and then refine together. Letting it explore freely at the start often led to results more creative and efficient than what I had in mind.
When did it win over me?
- When it out-designed me: Kiro surprised me with a cleaner, smarter UI implementation than the one I had planned.
- When it became my brainstorming partner: It didn’t just follow instructions—it actively helped me pivot and rethink the game flow when things weren’t working.
- When it tried to make me laugh: In the middle of all the chaos, it actually tried to lighten the mood. That’s when I realized I wasn’t just coding with an IDE — I was collaborating with one.
Feedback
- At one point it went crazy and started writing crazy stuff which may make sense to it but not me. If any of this made sense to you, let me know!
Techstack
- Devvit: Reddit's developer platform for building immersive apps that run natively in posts
- React 19: Modern UI framework with hooks, StrictMode, and TypeScript integration
- Express 5: Backend API server with RESTful endpoints and middleware support
- Redis: Fast data persistence for leaderboards, beat sequences, and speed challenges (via Devvit)
- Tailwind CSS 4: Utility-first styling framework with dark theme support
- TypeScript 5.8: Type-safe development across client, server, and shared modules
- Vite 6: Fast build tool with hot module replacement and optimized production builds
- Web Audio API: Browser-native audio processing for drum sound playback and timing
Conclusion
What started as a simple idea to create a rhythm-based Reddit game evolved into a full journey of experimentation, problem-solving, and creative discovery. Working with Kiro not only helped me bring the project to life but also changed how I approach development—less about controlling every detail and more about collaborating, iterating, and trusting the process.
From designing the app flow to implementing the game logic, facing bugs, pivoting concepts, and finally polishing the experience, every step taught me something new—about code, creativity, and adaptability. In the end, the project became more than just a game; it became proof of how human imagination and AI-driven tools can create something truly dynamic together.
P.S. - Looking forward to a version where audio commands will make the hands-free coding possible. That will give more time to explore more technologies.
Top comments (0)