2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

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

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

画面

top.jpg

主な技術スタック

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

  • 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が入力されます。

create.jpg

AI解析機能

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

default.png

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

analyze.gif

今後の展望

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

最後に

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?