Light of Life 🌍

📝概要

3D 地球儀上で世界中の人々の生死を体験出来る、インタラクティブなSNS

⚙️主な機能

インタラクティブな 3D 地球儀表示

• Three.js を使用した滑らかな 3D 地球の表示
• マウス操作による自由な視点移動
• 自動回転機能

リアルタイムに体感出来る人の生死

• 地球儀上のクリックで正確な緯度・経度を取得し、素早く投稿
• 生死の場所が一目でわかる

🛠️技術スタック

フロントエンド

• Next.js
• TypeScript
• Three.js
• TailwindCSS

バックエンド

• Supabase
• Versel

🌐開発環境のセットアップ

# リポジトリのクローン
git clone https://github.com/your-username/light-of-life.git

# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev

🤖AI活用

• Cursor
• GitHub Copilotによるレビュー
• ChatGPT

✨アピールポイント

• 地球の３Dに世界の出生率を年代ごとに表示する
• スマホでのUI/UX
• あえてユーザー認証を排除し、誰でも気軽に投稿・閲覧できるシンプルな設計
• あえてバックエンドを削り，フロントエンドに注力
• 新技術に挑戦したこと(Next.js，Three.js，SupaBase，Cursor etc...)

🌀しくじり談

• メンバーの１人がコードを一切書かずにAI全投げ縛りプレイを始めてしまった
• コード書けないからコンフリクトを他人に直させる（コンフリクト400行出た）
• CI/CDやレビューの仕組みを作ったのに，形骸化して意味がなかった
• AIに丸投げしたせいで，１つのコンポーネントに大量のコードが...(パンドラの箱か)

💡今回の開発から得た学び

～AIのご利用は計画的に～

• AIのみを使用する開発をする場合，きちんと筋道を作って計画的にやりましょう！！（薬物と一緒！）

ライセンス

MIT License

貢献について

プルリクエストやイシューの作成は大歓迎です。大きな変更を加える場合は、まずイシューを作成して変更内容を議論させていただければと思います。