Skip to content
Back to personal projects

Kiss Tony

Site Creator & Sole Developer

I turned our amateur CS2 team's shitpost-heavy branding into a live community site with browser games, recorded runs, persistent leaderboards and a working merchandise store.

Live
Kiss Tony reaction game showing a completed 280 millisecond attempt

A completed reaction run returns the time, rating and a one-click path to try again.

TypeScriptReactNext.jsReact Three FiberConvexClerkStripePrintfulResend

Context

Kiss Tony is our amateur OCE Counter-Strike 2 team: a group of mates entering a league for fun and joke-posting on social media. The site takes that deliberately unserious brand further with browser games, persistent competition, tie-ins to what the team is doing and a merch shop for designs we cooked up together. Underneath the joke is far more engineering than the premise could ever justify.

My role

  • Designed and built the complete product independently, including the interface, games, backend services, commerce integrations and production setup.
  • Turned our shared jokes and team branding into interactive games, competition and a deeper home for the things we make together.
  • Built the merchandise journey around designs the team created together, from product discovery and checkout through fulfilment updates and transactional communication.
  • Continued to improve production behavior as game replays, leaderboard traffic and merchandise functionality expanded.

What I built

  • Several branded browser games, including reaction-time testing and a first-person aim trainer with flick and tracking scenarios.
  • Clerk authentication and Convex-backed leaderboards, recent attempts, display names and synchronization of locally earned personal bests.
  • Compressed replay capture with embedded three-dimensional playback for leaderboard and recent-score attempts.
  • A Printful-backed catalogue with product and jersey pages, variants, image galleries, size guidance and a persistent cart.
  • Stripe checkout, verified webhooks, Printful fulfilment, order-status handling and transactional email through Resend and React Email.
  • Responsive and touch-friendly interactions, haptic feedback, route metadata, sitemap coverage and cached product delivery.

How it works

  • Next.js and React application combining ordinary product pages with React Three Fiber game loops and replay rendering.
  • Convex data design separates replay payloads from frequently queried score metadata so leaderboard reads do not load full recordings.
  • Game state spans anonymous local play and authenticated persistence without discarding a player's existing personal bests.
  • Failure-aware Stripe webhook handling keeps payment and Printful fulfilment behavior recoverable when downstream order creation fails.
  • Printful catalogue data is normalized into a custom storefront while Zustand maintains a resilient client-side cart.

Outcomes

  • Shipped and still operate a live home for the team, our jokes, community games and merchandise.
  • Created game experiences that visitors can use without an account while giving returning players persistent scores and replayable attempts.
  • Connected the public storefront to payment, fulfilment and customer communication rather than stopping at a catalogue prototype.
Kiss Tony aim trainer with flick and tracking scenarios, settings, a public leaderboard and replay controls
Scenario, duration and sensitivity controls sit beside public scores and recorded-run playback.
Three-dimensional playback of a Kiss Tony flick-training leaderboard run with targets at different depths
The replay view reconstructs target positions across the run with scrubbing and playback controls.