Petty Wars

Inspiration:

Petty Wars was born from the universal truth that people love to argue about the most trivial things. I was inspired by endless Reddit debates over pineapple on pizza, toilet paper orientation, and other “controversial” topics, and by the joy of friendly arguments that bring people together over silly disagreements. I also wanted to explore gaming mechanics that make even the most mundane choices feel epic, social voting systems that create real-time community engagement, and the absurdity of taking petty disagreements seriously, turning them into epic boxing matches. My goal was to create a space where people could channel their inner “Karen” about the most ridiculous topics in a fun, gamified way.

What it does:

Petty Wars is a real-time social voting game that transforms trivial disagreements into epic boxing matches. Players are presented with daily rotating questions, 60 different petty arguments in total, and cheer for their chosen side using a real-time voting system. Each battle unfolds in an animated boxing ring with health bars, knockout effects, and dynamic fighter stats including speed, power, defence, and stamina. The game tracks votes in real time and determines winners round by round, while live data visualisations display vote trends, fighter popularity, and question statistics. I also made sure the experience is mobile-optimised, with touch gestures, haptic feedback, and an achievement system that rewards streaks and unlockable content.

How we built it:

I built Petty Wars using React and TypeScript for the front end, Vite for rapid development, and Tailwind CSS for styling with custom animations. The backend is powered by Node.js and Express in a serverless architecture, and the entire platform runs on Reddit Devvit. I used React hooks for state management, SVG-based charts for data visualisation, and implemented a daily question system that drives dynamic fighter generation. Real-time updates are handled with a WebSocket-like polling system that keeps votes and health bars synchronised across all users every second. I also prioritised mobile optimisation, designing touch gestures, responsive layouts, and haptic feedback to make battles feel natural on any device.

Challenges we ran into:

One of the biggest challenges was keeping vote counts synchronised across all users in real time. I solved this by implementing 1-second polling updates, which ensured accurate results instantly. Designing mobile touch gestures to feel intuitive was another hurdle, so I added swipe controls, haptic feedback, and responsive layouts to create a seamless experience. Visual clarity was also tricky due to complex backgrounds, so I added background opacity, borders, and shadows to improve readability. Additionally, maintaining smooth animations while updating data frequently required optimising re-renders and using CSS transforms. Managing over twenty state variables for game mechanics was another challenge, which I addressed by organising state logically and following best practices with React hooks. Finally, ensuring charts and graphs were readable on mobile screens required careful responsive design and optimised sizing.

Accomplishments that we're proud of:

I’m proud to have built a fully functioning real-time voting system that works seamlessly across multiple users, with smooth 60fps animations and complex fight sequences. I designed an immersive boxing ring experience with dynamic fighter customisation and visual effects like particle impacts and screen shake. The mobile-first design works on all screen sizes, with intuitive touch controls, haptic feedback, and live data visualisation. I also created 60 unique daily questions with dynamic fighters, an achievement system with streaks and unlockable content, and a game mechanic that keeps players coming back daily. Seeing users engage socially and compete over trivial arguments has been incredibly rewarding.

What we learned:

Technically, I learned how crucial careful state management is for real-time data, and how performance optimisation directly impacts user engagement. Mobile optimisation and responsive design are key to keeping players immersed, while live data visualisation can make simple concepts feel dynamic and exciting. From a user experience perspective, I learned that people genuinely enjoy gamified trivial arguments, and that visual feedback, animations, effects, and haptic responses, significantly boosts engagement. I also deepened my understanding of TypeScript, Tailwind CSS, React hooks, and API design, and how these tools work together to create complex interactive applications.

What's next for Petty Wars:

In the short term, I plan to add user profiles with personal statistics and achievements, leaderboards for top voters and most controversial questions, push notifications for daily content, and social sharing of fight results. Over the next few months, I aim to implement tournament mode with bracket-style competitions, allow custom question creation, enable fighter customisation with unlockable equipment, introduce team battles, and host seasonal events with themed rewards. In the long term, I hope to integrate AI-powered question generation based on trending topics, voice commands for cheering and voting, AR features for immersive fight experiences, cross-platform support. Ultimately, I envision Petty Wars as a global platform where friendly arguments turn into epic, shared experiences, fostering community and fun around the most trivial disagreements.

Built With

• express.js
• javascript
• node.js
• react
• redditdevvit
• tailwindcss
• typescript
• vite