ClapMetrics

Satirical Clapping Analytics. An online clapping experience that's like a fitness tracker but for your applause. Track each clap and turn every hand collision into performance art.

Comment

Inspiration

ClapMetrics started as an idea for the Reddit x Bolt Silly Sh!t Challenge. The plan was to build something completely ridiculous — an app that takes something as throwaway as clapping and treats it like high-performance data.

It was my first time trying to build something that actually lives on Reddit, and honestly, I kept running into setup issues I couldn't solve in time. So after a few attempts, I shifted focus and decided to submit it to the One Shot Bonus Prize instead. It felt like the spirit of the idea still fit: one prompt, one silly/fun tool.

What it does

ClapMetrics is a satirical clapping analytics app that's both unnecessarily over-engineered and surprisingly functional. The app features a complete ecosystem of clap tracking with real-time metrics, achievement systems, competitive leaderboards, and detailed analytics dashboards.

Core Features:

  • Real-time clapping interface with sound effects and visual feedback
  • Analytics dashboard with charts and progress tracking
  • Competitive leaderboard system with mock users
  • Achievement badges with unlock progression
  • Mood tracking with 10 different emotional states
  • Persistent data storage with daily reset functionality
  • Responsive design optimised for all devices
  • Professional navigation with glassmorphism effects

How I built it

I used Bolt.new and wrote a detailed one-shot prompt to generate the app’s frontend. Everything was done using Bolt’s interface — no hand-written code. The application includes sophisticated features like Web Audio API sound effects, persistent localStorage data with daily reset functionality, mood tracking with emoji selection, and a comprehensive badge system.

Design Elements:

  • Custom gradient backgrounds with purple-pink-red colour scheme
  • Glassmorphism cards with backdrop blur and subtle borders
  • Fredoka and Bungee fonts for modern typography hierarchy
  • Smooth animations including confetti, bounce, and hover effects
  • Professional spacing using consistent 8px system
  • Lucide React icons throughout for visual consistency
  • Mobile-first responsive design with proper breakpoints

Challenges we ran into

Reddit integration was the hardest part — I followed the instructions but still struggled to get everything working properly.

Accomplishments that I'm proud of

The design implements beautiful glassmorphism effects with purple-pink-red gradients, custom animations, and responsive layouts that work perfectly across all devices.

What I learned

  • It’s possible to make something fun, interactive, and complete in a single prompt
  • Sometimes your first idea doesn’t land, but there’s still value in following it through

What's next for ClapMetrics

  • Real analytics dashboard with mood-based pie charts, clap velocity graphs, and calorie estimates so pointless they’re poetic
  • Achievements & badges with wild names like Clap Legend and Mood Master, all beautifully animated and colour-coded by rarity
  • Proper sound design using a wider range of audio effects

With time, I could expand it into a classroom or workshop engagement tool. In both online and in-person sessions, participation can be passive. This turns applause into a fun, visual part of group interaction. Or ClapMetrics could allow learners to “clap” during presentations or sessions and show real-time data on group engagement or reactions. Could be great for icebreakers, feedback, or vote-based games. It could also integrate with tools like Slack or Zoom to clap for team wins, birthdays, launches, etc. — with badges for “Most Celebratory Teammate” and similar roles.

However, I like the idea of leaving it as-is. I like the idea of it remaining a satirical mirror of quantified-self culture. Tech often takes itself too seriously. This app makes a subtle (or not-so-subtle) critique of how we track and optimise everything. For this reason, it could live as a digital art piece on platforms like Are.na, Glitch, or even as part of an interactive exhibition.

Built With

  • bolt.new
  • cssanimationsviatailwind
  • glassmorphism
  • googlefonts(fredoka+bungee)
  • localstorage
  • lucidereact
  • react
  • reactcontextapi
  • reactrouter
  • tailwindcss
  • typescript
  • webaudioapi
Share this project:

Updates