turbomac

プロジェクトの詳細：Nuggetsの記事

テクノロジースタック

• next.js 13
  • Zustand
  • Tailwind CSS
  • フレーマーモーション
• nest.js
  • プリスマ
  • mysql
• socket.io
• Turborepo
• ターボパック
• netlify

ツールライブラリ：

• daisyui
• @neodrag/React
• ああ

プロジェクトの利点

• タイプスクリプトフルスタック開発
• 最新のテクノロジー（next.js 13、Turbopack、RSC）の練習に基づく
• Turborepoはプロジェクト構造を管理します
• コンポーネント開発、クリアコードロジック
• ページはシンプルでエレガントです
• 豊富なアニメーション効果

エフェクトディスプレイ

• オンラインエクスペリエンス：Turbomac

トップバーステータスバー：

• ダーク/ライトモードの切り替え
• ContextMenuをグローバルに追加します

アプリを開閉して閉じます：

• 各アプリの上部範囲をドラッグしてドロップし、上部範囲でダブルクリックして拡大することができます

起動を開始しました：

• また、ホバーウィンドウの4つの角にトリガーできます

ターミナル

• ファイルパスにジャンプしてファイルを開くことができます
• 上下キーで履歴コマンドレコードを切り替えます
• タブキーを介して履歴を完了します
• コマンドラインでアプリを開閉します

TurboChat

• インスタントメッセージング
• 荷重のスクロール
• ファイルアップロード
• トランジションアニメーション

chatgpt

• Openai APIへのアクセスとChatGptをオンラインで使用します

vscode

• github1sを使用してソースコードをオンラインで表示します

プロジェクトの開始

GitHubプロジェクトアドレスに移動して、プロジェクトソースコードをプルします。

端子はフォルダディレクトリに入り、 npm installまたはpnpm installを実行します

クライアントフォルダーとサーバーフォルダーにそれぞれ.ENVファイルを作成します

クライアント/.env

 NEXT_PUBLIC_OPENAI_API_KEY= 你自己的 OpenAI Key
NEXT_PUBLIC_NODE_ENV= dev

# 部署到服务器相关
# NEXT_PUBLIC_HOST = 例如https://175.24.18:8080/
# NEXT_PUBLIC_WEBSOCKET = 例如https://175.24.18:81/

サーバー/.env

 # 部署上线 mysql
# DATABASE_URL= "mysql://ljq:[email protected]:3306/my_mac"
# 本地mysql 将自己的 usernamepassworddatabase名字换入
DATABASE_URL= "mysql://username:password@localhost:3306/database"
# 下面为腾讯云 ID 和 KEY 填入自己的信息
TX_SECRET_ID = 'AKID8J....'
TX_SECRET_KEY = 'vaz81....'
# COS 存储桶
TX_BUCKET = 'turbomac-13093...'
TX_REGION = 'ap-shanghai'

CDはサーバーフォルダーに入り、 npx prisma migrate dev --name initを実行してデータベースを初期化し、Prisma Clientを使用してprisma generateを使用します。

クライアントとサーバーを実行するには2つの方法があります。

• （推奨）クライアントとサーバーフォルダーを入力して、それぞれnpm run devまたはpnpm run dev実行します
• ルートディレクトリで直接turbo devを実行します

実行後、サーバーはポート8080にあり、クライアントはポート3000になります。CointLocalHost：3000を開くと、ページが表示されます。登録ユーザー：Postman/Apifoxおよびその他のインターフェイスリクエストツールに移動し、登録ユーザーインターフェイス： http://localhost:8080/register

TurboChatにログインします

他のアプリを追加する方法