shark chat js

サメのチャット

TRPC、Tailwind CSS、Ably、Redis、Cloudinary、Drizzle Orm、Next.JSで構築されたチャットアプリ

このリポジトリはモノレポ（Turborepo）です。

特徴

• チャットグループを作成、更新、削除します
• 送信、更新、削除メッセージ
• マークダウン（GFM、サポートされているテーブル）、コードハイライト、メッセージのラテックス
• 参照メッセージ
• メッセージ埋め込み（メッセージ内のリンクのオープングラフデータを表示）
• メッセージを介して画像/ファイルを送信し、画像ズームイン
• 誰とでも直接メッセージ
• グループメンバーを表示およびキックします
• カスタムエモート
• 招待コードまたはURLを介してグループメンバーを招待します
• ユーザーアバター、グループバナー、アイコン画像をアップロードします
• 新しいメッセージが受信されたら通知を表示します
• AI駆動のメッセージライター
• 組み込みのAIチャットボット（inworldを搭載）
• アカウントを削除します
• ライト＆ダークモード
• 100％TypeScript

それで遊ぶ： https：//shark-chat.vercel.app
詳細： https：//shark-chat.vercel.app/info

地元で遊ぶ

Shark Chatは、さまざまな機能をサポートし、サーバーレス環境で完全に機能するために、多くのサードパーティサービスと統合されました。

したがって、プロジェクトを地元でプレイする前に、プロジェクトを正しくセットアップするために、各サービスのアカウントを登録する必要があります。 .env.exampleのすべての環境変数を入力してください。

アップスタッシュ

WebサイトでRedisデータベースを作成し、コンソールからREDIS_URL 、 REDIS_TOKENを取得します。

うまくリアルタイム

https://able.comで新しいプロジェクトを作成し、環境変数にABLY_API_KEYを貼り付けます。

データベース

デフォルトでは、データベースにNeon ServerLess PostresQLを使用してDrizzle ORMを使用します。必要に応じて、他のプロバイダーを使用できます。

postresqlデータベースを作成し、 DATABASE_URLを取得します。

曇り

https://cloudinary.comで新しいプロジェクトを作成し、クラウド名、キー、APIの秘密をコピーします。

次の認証

NEXTAUTH_URLとNEXTAUTH_SECRETを入力して、詳細についてはドキュメントをお読みください。

現在、Github Oauthのみがサポートされています。このガイドに従って、githubにOAuthアプリをセットアップし、 GITHUB_SECRETでGITHUB_ID生成します。

開発モード

pnpm run devとファイルを編集して変更を確認します。

ソースからビルド

このプロジェクトでは、TurborepoとPNPMを使用しています。

pnpm run build

Vercelまたはその他のプラットフォームに展開できるはずです。