2020-06-01に更新

あなたの熱意が票になる人気投票

サービスはこちらです↓
https://like-ranking.web.app/

あなたは好きなだけ投票することができます。
あなたの頑張りがそのまま票に反映されます。
あなたの成果はランキングで可視化されます。
あなたと共に戦う仲間やライバルが見えます。

最初は、この二択投票をいくつも作るようなイメージで考えていました。
「Unlimited Vote」という名前まで考えたのですが、一回り小さいスケールになったので、安直に「きのこの山たけのこの里人気投票」にします。
image

使用技術

  • Vue.js
    • Vue-CLI
  • Firebase
    • Cloud Firestore
    • Authentication
    • Hosting

感想

Firebaseを初めて触りました。
ユーザーを識別したかったので匿名認証というどんぴしゃりなものがあったのがよかったです。
そして、リアルタイムでデータが変わるのが見えるのが一番おもしろかったです。これは狙いではなかったのですが、結果的にライブ感があってよかったと思います。

ただ、かなりよくわかっていないまま実装したので、問題点はありありです。
一番の問題点は、Firestoreのデータが冗長化している点です。そして、1クリックで2リクエスト送るというわけのわからないことをしています。
ちょっとこれは早急にどうにかしたいなと思っています……。

(追記)修正して、かなりデータベースはすっきりしたと思います。

デザインは以下を少し参考にしました。
http://www.morozoff.co.jp/puddingbattle/second/

反省点は山ほどありますが、とにかくめちゃくちゃ楽しかったです!
このような企画があると、思いつきのアイデアを作る機会になるのでいいですね!
ありがとうございました!!

(追記)
無料枠を超えてしまっているようです。太平洋時間の0時(17時)までお待ちください!!


END

小学校の先生(岡山)→旅館の仲居(山梨)→プログラマになるべく勉強中(東京) #RUNTEQ 1月生

コメント