Karma Clicker

Inspiration

Reddit karma is a fun, universal metric across the site. We wanted a lightweight, delightful clicker experience that lives directly inside a Reddit post, showcases Devvit’s serverless APIs, and feels satisfying with quick feedback, upgrades, and a friendly leaderboard.

What it does

• Tap to earn karma: Click the Upvote button to gain karma.
• Buy upgrades: Progress faster with per-click multipliers and passive auto-karma.
• Real-time-ish progress: Auto-earn accrues on the server and is reflected through periodic refreshes.
• Leaderboard: See the top players and your rank.
• Polish: Particle bursts and a floating +X popup for satisfying feedback.

How we built it

• Client (src/client): React + Vite + Tailwind. The App uses a useCounter hook to call server endpoints, render karma, upgrades, and a leaderboard, and trigger lightweight animations.
• Server (src/server): Express running in Devvit’s serverless runtime. Endpoints: GET /api/karma/state, POST /api/karma/click, POST /api/karma/buy, GET /api/karma/leaderboard.
• Persistence: Redis stores player karma, upgrade levels, and a ZSET-backed leaderboard.
• Game logic: Centralized in src/server/core/game.ts with typed models in src/shared/types.

Challenges we ran into

• Serverless constraints: No traditional sockets; designed around simple HTTP endpoints and polling.
• Fair play: Implemented a basic click rate limit to curb spamming.
• Consistency: Guarded against stale responses by applying monotonic client updates and server-side accrual before writes.
• Cost growth: Balanced geometric pricing so upgrades feel rewarding without runaway inflation.

Accomplishments that we're proud of

• A smooth, responsive UI with small but joyful effects.
• Clear, shared TypeScript types across client and server.
• Simple, reliable accrual/leaderboard system using Redis primitives.
• Readable, self-contained game logic that’s easy to extend.

What we learned

• How to structure Devvit web apps with a serverless backend and a React webview.
• Practical patterns for Redis ZSET leaderboards and Hash-based state.
• Techniques to keep UI state consistent under latency (polling, monotonic updates).

What's next for Karma Clicker

• More upgrades, achievements, and prestige loops.
• Daily challenges, streaks, and time-limited events.
• Better visuals: themes, sounds, and celebratory animations.
• Social features: subreddit-wide milestones and cooperative goals.
• Quality-of-life: accessibility tweaks, mobile refinements, and performance tuning.

Built With

• react