NowLoading...

もくもく

https://mokumoku.vercel.app/

Firebase

Firebase

Firestore

Firestore

Next.js

Next.js

TypeScript

TypeScript

1つのチャンネルでみんなともくもく!もくもく特化通話アプリ

ユーザーアイコン

Nishino

MacBook
サムネイル

推しアイデア

音声通話アプリなのに静かにすることを推奨しているという逆転の発想を落とし込みました.なお,もくもく会はただもくもく作業を目的としているのでチャンネルと言う概念は存在しません.

作った背景

もくもく会でみんなで作業をするのが好きなのに,この状況下気軽にもくもく会が開けないのと、気軽に参加できるもくもくサービスを作りたかった

推し技術

Next.js Tailwind css Typescript Agora Firebase Vercel

プロジェクト詳細

  • Next.js + Tailwind CSS + Vercel + TypeScript + Agora + Firebase
  • Clubhouseでも採用されているAgoraを使用することで音声通話を実現
  • 一つのチャンネル→匿名で誰が入っているのかわからないのでみられてることによる作業率アップ
  • ユーザー登録なしですぐに利用できる
  • 完全ミュート機能→規程音量レベルを超えているのが検知されたらこの機能が発火される
  • 自動音量下げ機能→音声レベルを2秒毎に表示(0~100)→実際は上限を3に設定
  • →大きい場合は音量を1/20の1に減少→一次関数的に下に戻す
  • →2秒×15回連続で静かな場合に元の音量になるようにアルゴリズムを作成
  • クライアント側ではなくバックエンド側からfirestoreにアクセスする→Next.jsのAPI機能を使用し、動的にmetaタグを生成し動的OGP画像を定義
  • もくもくの経過時間によって🎖を付与
  • agoraがsafariなどをサポートしていないのでsafariを使用したときはtopページにいけないようにブラウザGuardを実装
Nishino

Nishino

@bv583bgy7gs3zbx5