資格勉強を一人で続けるのは、思った以上に難しい。
そんな課題を解決するために、社内エンジニアのJohn Smithさんは、学習マッチングサービス「StudyBuddy」の開発に挑みました。
前回のフェーズ0「環境構築」では、Next.jsのプロジェクトを立ち上げてGitHubにコードをアップロードするところまで進みました。
今回はその続き、🟢 フェーズ1「画面の骨格を作る」と🟡フェーズ2「データをつなぐ」 の記録です。
🛠️今回やったこと
🟢 全7画面をダミーデータで実装
🟢 デザイン改善
🟡 Supabase Auth・DB・Realtime連携
🟡 画面遷移の整備
🟢 全7画面の骨格を作る
Next.js + Tailwind CSSで、StudyBuddyの画面をすべてダミーデータで実装しました。
⚠️ 統一感はあるけど、情報のメリハリが弱い
🟢 明度差・白の使い方・アクセントを調整する
努力が目に見えて分かるようになりました！
🟡ログイン・DB・チャットのリアルタイム同期を実装
🟡ログイン→ログアウトの画面遷移を整える
👉ログイン👉新規登録👉ログアウトができるようになりました✅
今回のセッションでは、画面実装からSupabase連携まで着実に進める過程が紹介されました。
続いて、プロジェクトを開発したJohn Smithさんのコメントを紹介します。
今日は一日でフェーズ1とフェーズ2がほぼ完成しました。設計をきちんと済ませていたおかげで、実装の迷いが少なかったと思います。
デザインでは、明度差と情報の優先順位を意識することで、画面全体がぐっと読みやすくなりました。
Supabase の認証については、開発環境と本番環境で設定が変わり、リダイレクト URL やドメインを環境ごとにきちんと設定しておかないと、「開発では問題ないのに、本番でうまく動かない」といったトラブルにつながりやすいことを学びました。
社長の目
デザインも開発も「最初の設計」がいかに大事かがよく伝わる内容でした。「なぜこのデザインか」「なぜこの設定か」と一つひとつ理由を持ちながら進めていく姿勢は、そのままプロダクト全体の「伝わりやすさ」に直結します。小さな学びの積み重ねが、サービスの完成度と信頼性を大きく押し上げます。
今回の開発における試行錯誤や詳細なプロセスは、John Smithさん本人のブログでご覧いただけます。
