レスシャット！ |リアルタイムメッセンジャー| Pern-graphql
Pern + GraphQLで作成されたリアルタイムチャットアプリ - プライベート、グローバル、グループメッセージングを備えています
デモ
netlify（フロントエンド）とヘロク（バックエンド）に展開
使用して構築されています
フロントエンド
- ReactJS-フロントエンドフレームワーク
- Apolloクライアント - GraphQLを使用してローカルデータとリモートデータの両方を管理する州管理ライブラリ
- Apolloサブスクリプション - GraphQL Serverからリアルタイムの更新を取得する
- コンテキストAPI w/ hook-ユーザーの状態、選択されたチャット、トースト通知、テーマなど。
- Reactルーター - 一般的なルーティングとナビゲーション用
- Reactフックフォーム - 柔軟なフォーム用
- CSSカスタマイズが多数ある材料-UI -UIライブラリ
- YUP-フォーム検証用
- 日付FNS-日付の操作とフォーマット用
バックエンド
- node.js- JSのランタイム環境
- Apollo Server-自己文書化GraphQL APIサーバーを構築する
- Apolloサブスクリプション - サブスクリプションは、Apollo Serverから放出されるイベントを監視するGraphQL操作です。
- PostgreSQL -Source SQLデータベースを開き、データを保存します
- SQLベースのデータベースのSequelize -nodejs orm
- JSON Webトークン - HTTPリクエストを保護/認証する標準
- bcrypt.js-パスワードをハッシュするため
- dotenv -envファイルから環境変数をロードする
特徴
- 認証（ユーザー名とパスワード付きのログイン/レジスタ）
- Webソケットを使用したリアルタイムチャット
- すべての登録ユーザーとのプライベートメッセージング
- オールユーザーの1つの場所のチャットのためのグローバルチャネル
- 選択したユーザーとグループの作成
- ユーザーは、追加された後にグループから離れることができます
- グループ作成者は、グループからメンバーを追加/削除できます
- グループクリエイターは、グループを削除できます。
- グループ作成者は、上記のグループの名前の名前を変更できます
- 記述メッセージを使用したエラー管理
- アクションのトースト通知：グループの作成、ユーザーの削除など。
- 関連するフェッチングプロセスのためにスピナーをロードします
- 質問/回答/コメントを追加/更新するためのフォーマットされた日付
- ローカルストレージの保存付きダークモードトグル
- すべての画面に適切なレスポンシブUI
スクリーンショット
デスクトップ/タブレット
携帯
使用法
env変数：
サーバーディレクトリに.ENVファイルを作成し、以下を追加します。
PORT = 4000
JWT_SECRET = "Your JWT secret"
クライアント：
オープンクライアント/src/backendurls.js＆「backendurls」オブジェクトを次のように変更します。
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
クライアント開発サーバーの実行：
cd client
npm install
npm start
サーバ：
Open Server/config/config.json＆Development Keysの値を更新して、ローカルPostgreSQL資格情報に一致します。
まだ「Sequelize-Cli」＆ 'Nodemon」をグローバルパッケージとしてインストールしてください。
このコマンドを実行して、SQLテーブルを独自のローカルPSQLに移行します： sequelize db:migrate
バックエンド開発サーバーの実行：
cd server
npm install
npm run dev
