初めての個人開発 × 観戦ログアプリを Next.js & Supabase で作った話

推し選手が活躍したあの試合、後でパッと振り返りたい

「この試合、現地で見たな」
「推し選手のあの活躍、もう一度振り返りたい」

そんな観戦の思い出を “記録” として残せるアプリ「FanTrack(β版)」を作りました。

この記事では、初めての個人開発でどう進め、どうリリースにこぎつけたかをざっくり紹介します。

🛠 使用技術と選定理由（コストを抑えてスケーラブルに）

• Next.js：API Routes も使える柔軟さと学習目的
• Supabase：PostgreSQLが無料枠で使える
• Drizzle：型安全かつ効率的にDB操作が可能
• Tailwind CSS × shadcn/ui：高速かつ柔軟にUI構築
• Vercel：Next.jsとの相性◎でデプロイが楽
• TypeScript：型を整え、保守性も重視

📋 実装した機能（MVP）

• 観戦ログの登録・閲覧・詳細表示
  • 観戦日
  • 対戦カード
  • 観戦方法（現地／ライブ／録画）
  • 試合評価（⭐️）
  • 推し選手
  • 一言メモ

まずは「最低限、記録ができること」に絞って実装。
画面もシンプルに、フォーム1枚で完結できるUIに仕上げました。

💡 苦労と工夫（早朝開発で乗り切った）

• 👶 時間の捻出が一番の壁：もうすぐ2歳の子どもがいる中で開発
• ⏰ 朝型へシフト：5:00〜6:30の朝時間に毎日コツコツ継続
• 🤖 AIを相棒に：設計やコードの壁も気軽に相談できた
• ✅ Jiraで可視化：完了タスクの積み上げが励みに

**完璧を求めず、「まずMVPで出す」**ことに割り切ったのが継続の鍵でした。

✍️ 学びとTips（無料が最強）

• インフラ周りとNext.jsの構成理解が一気に深まった
• 「完璧より、まず公開→改善」という方針で進めた
• 自分の生活リズムに合った時間帯に習慣化するのが大事
• 個人開発では、無料枠の活用＝持続性と自由度のカギ

🙌 最後に

📝 各技術の深掘り記事は別で公開予定なので、よければフォローしてください！
👋 あなたの「推し試合」、どう残していますか？
感想・フィードバックも大歓迎です

UI改善や観戦記録の共有機能など、これからも開発を進めていく予定です！！