【React+Firebase】素人が個人開発でTCGマッチングサイトを難産した話
カードゲーマー向けのマッチングサイトを個人開発しました
機能紹介
プロフィール機能
カードゲーマー仕様に合わせた仕様を目指しました
かんたんなユーザー検索とフレンド機能もあります。
対戦募集機能
時間と場所を指定して対戦を募集できます。(参加人数15人まで)
チャット
グループにも対応したチャットです。
先程の募集に参加したメンバー同士で打ち合わせすることもできます。
作った理由
単純に遊び相手がいなかったのが大きいです。
僕は岡山在住です。近くにカードショップがなく中心街に出かけた時余った時間でカードショップに行くんですが人も少ないしがんばって話しかけても断られるのも怖いし同じカードゲームやってるか近くでジロジロ確認しに行くのもキモがられそうで怖い・・・
という理由から対戦募集用のサイトを検索して無かったので自分で作るか！という経緯です。
プログラミングを始めたのもそこからで、一年半以上前にhtmlから初めrailsに寄り道して別のwebアプリを作ったりした後、
8月ごろからreactの勉強をしてreact+firebaseでduelmatchingの作成に取り掛かりました。
アプリ版
一応DuelMatchingはこの後アプリ版も開発も予定しています。
flutterでの開発を計画しているんですがまだこれから勉強する段階です。
web版から作ってアプリ版も作るのは手間ですがどっちでも作ってみたかったという好奇心からこうなりました。
まずは簡易的なweb版で認知度を上げてからアプリ版で集金する予定ですがweb版に3ヶ月以上かかっちゃいました。
仕様した技術
- React
- typescript
- firebase(auth,firestore,hosting,cloud function)
- chakra ui
- react-infinite-scroller
まずweb版アプリ版両方作る上でデータの共有が簡単そうなfirebaseにするというところから決まりました。
Reactにした理由は
- なんとなく挑戦してみたかった
- 練習目的で作ったので求人が多そうな方
- typescript、firebaseと合わせている教材が多かったので
chakra uiはtailwind＋bootstrapっぽい感じで非常に使いやすかったです。
やっとbootstrapから卒業できました。
苦労したところ
無限スクロール
react-infinite-scrollerを使用しましたがfirebaseとの組み合わせが素人には結構難しくググってもコードが読めず参考にして自分なりにいじれるようになるまで結構かかりました。
検索機能でにusestateをリセットせずループしたりonsnapshotで最新投稿を追加する実装でループしたりしました。
通知機能
マッチングサイトを作る上で新規チャットやフレンド申請などを通知する機能は必須だと考えて実装したんですが似たケースの実装例が見つかりにくく基本google頼りだったのでなんとか自力でそれっぽい機能に仕上げました。
cloud functionトリガーでfirestoreの更新を検知してユーザーごとに通知を生成する仕様にしました。reactのuseEffectでページ読み込み時に既読をfalse/trueに切り替えて判定してます
typescriptの型指定
後のほうになるほど雑になっていっちゃった感じがします。とりあえず?使ったりas多様したり「ほんとに意味あるかなこれ？」ってなりながら書いてることが多かったです。もっと勉強しておきたい。
モチベーション
個人開発中ってやめてたネトゲが急にやりたくなるしめちゃ面白く感じるんですよね。三ヶ月半のうち何日間かはwarframeやってました。
参考にしたサイト・教材
さいごに
これからはweb版の様子を見つつflutterの勉強を初めていく予定です。
noteに経過を記録していきます。
未経験フリーターなので絶賛求職中です
Discussion