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/writethat is pinged when clicking the clap button. See useTrackClicks hook.- This analytics call is debounced client side with a
useDebounceFunctionhook. - The endpoint is also setup to occasionaly fail some percentage of the time, and the
useTrackClickshook 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.
- This analytics call is debounced client side with a
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!