Demo Project

This project showcases the following features:

• Deployed on Vercel and the master branch version can be viewed here: button-demo.vercel.app.
• A clap button that animates when clicked.
  • Copied and modified from here (jsfiddle demo).
  • See the ClapButton component.
• Clicking the clap button increments a debounced count value that is charted in the background of the page using react-charts.
  • See the BackgroundScoreChart component.
• There is also an Next.js API endpoint at /api/game/write that is pinged when clicking the clap button. See useTrackClicks hook.
  • This analytics call is debounced client side with a useDebounceFunction hook.
  • The endpoint is also setup to occasionaly fail some percentage of the time, and the useTrackClicks hook will retry the request a set number of times.
  • The endpoint saves the click data to an Upstash instance in a lexicographic sorted set timeseries format for easy querying.

During development I thought it would be cool to turn this into a game so I am looking at adding realtime syncing with other people viewing the website via Replicache. The idea will be to compete with other players in real time probably by clicking the button the fastest to some score. Check back soon to try it out!