リアルタイムウェブカウンター

本記事は「クソアプリ Advent Calendar 2024」17日目#4 の記事です。

作ったもの

リアルタイムでカウンターを増やせるだけのWebサービス¹を作成しました

技術スタック

• Next.js, React, shadcn/ui
• Firestore (リアルタイム リスナー)

機能紹介

クリックカウンター ²

知り合いやコミュニティ内でカウンターを共有できます。
管理画面からアイコン部分を変更ができ、様々な用途？に対応ができます。

---

投票カウンター ³

投票が作成でき、結果は即時グラフに反映されます。
管理画面からグラフの表示変更ができます。

---

ページビューカウンター ⁴

割愛

クソポイント

• カウントアップ時のアニメーションが気持ちよくない
• キャッシュしておらず、サービスとしてはコストが心配
• 最終的なカウント数しか管理してないので、データ活用ができない
• 他

さいごに

リアルタイムで画面内の数値やグラフが変動するWebサービスを見たくて作成しました。

1. https://smashpass.vercel.app/ ↩

2. https://smashpass.vercel.app/clicks/42LXvRow3KIrf4rm4s5s?act=true ↩

3. https://smashpass.vercel.app/graphs/MGZLFouWunWe5VnMcbQr?act=true ↩

4. https://smashpass.vercel.app/views/xHI5Oo9OiAO674ZUQ9a2 ↩