@react-threeを使用してプロジェクトのお墓サービスを作りました

@react-threeを使用してプロジェクトのお墓サービスを作りました

停止したサービスややる気を消失して途中で実装を中止したプロジェクトの供養場所みたいなのがほしくて実装しました。

ポートフォリオの小ネタの一つに使っていただけたら幸いです。

画面

主な技術スタック

無料枠で運営しています。

• T3
  • Next.js・React
  • TailwindCSS
  • NextAuth
  • Drizzle
  • tRPC
• shadcn/ui
• three.js
• @react-three/drei
• @react-three/fiber
• Vercel
• Neon
• Upstash

機能

ログイン

NextAuthを使用しています。GithubプロバイダーによるOAuth認証を行います。

プロジェクトの作成

左側に作成フォームがあるのでそちらから入力します。セレクトバーにはパブリックリポジトリが表示されますので、そこから終了したサービスなどを選択してください。選択すると自動でリポジトリ名、リポジトリの説明、URLが入力されます。

AI解析機能

初期画面は以下のようになっていて、中央のボタンをクリックすると解析が開始されます。1日5回までの回数制限を設けています。先日話題になったgitdiagramのようにはいきませんが、ある程度のアーキテクチャ図を作成してくれます。

作成したアーキテクチャ図は以下のように表示されます。保存ボタンをクリックしない限り、保存はされませんので注意してください。アーキテクチャ図は拡大・縮小・移動が可能なので多少大きくても見やすいように実装を心がけています。

今後の展望

あまり発展の可能性がないサービスだと思っていますが、課金システム等導入してOpenAIのAPIサービスが利用できるなどの特典がつけれるようにしたいと思っています。

最後に

改善点、感想などをお教え頂ければ幸いです。よろしくお願いいたします。