SW Frontend

読み聞かせFE

---

目次

• について
• ウェブサイトのスクリーンビデオと機能
• ドライブリンク
• プロジェクトのセットアップ
• 貢献者

について

• reddit のフロントエンド部分を模倣するプロジェクト。

Web サイトのスクリーンビデオと機能:

ユーザー認証

• Googleを使用してログインする
• Facebookを使用してログインする
• サインアップ
• ログイン
• パスワードを忘れた場合
• ユーザー名を忘れる
• パスワードを変更する

SW1.mp4

SW1.mp4

---

?‍♂️ ユーザープロフィール

• プロフィールの概要 (投稿、コメント、賛成票、反対票など)
• あなたの投稿
• コメント
• あなたの賛成票
• あなたの反対票
• 保存した投稿とコメント
• あなたの非表示の投稿とコメント
• あなたの歴史
• あなたのフォロワー

SW4.mp4

SW4.mp4

---

コミュニティ(サブレディット)

• コミュニティの概要 (投稿、コメント、賛成票、反対票など)
• コミュニティの投稿
• コミュニティのコメント
• コミュニティカテゴリー
• トップコミュニティ

SW7.mp4

SW7.mp4

---

?役職

• リッチテキスト投稿を作成する
• 画像と動画の投稿を作成する
• リンク投稿を作成する
• 投稿にセンスを加える
• 投稿にネタバレを追加する
• NSFWを投稿に追加
• 賛成票と反対票の投稿
• 投稿を保存する
• 投稿を非表示にする
• 投稿をシェアする
• 自分の投稿を編集する
• 自分の投稿を削除する
• 自分の投稿をロックする

SW3.mp4

SW3.mp4

---

?検索

• 郵便から探す
• コメントから検索
• コミュニティから探す
• 人から探す

SW9.mp4

SW9.mp4

---

⁉️コメント

• リッチテキストコメントを作成する
• 任意のレベルまでのネストされたコメント
• 賛成票と反対票のコメント
• コメントに返信する
• 自分のコメントを編集する
• 自分のコメントを削除する
• 自分のコメントをロックする

SW2.mp4

SW2.mp4

---

?通知

• プッシュ通知
• すべての通知

---

✉️メッセージ

• プライベートメッセージを送信する
• すべてのメッセージ
• 未読メッセージ
• 送信済みメッセージ
• 返信を投稿する
• ユーザー名の言及
• メッセージを削除する
• スパムメッセージ
• メッセージに返信する

SW6.mp4

SW6.mp4

---

?モデレータ

• キュー
  • スパム（投稿のみ、コメントのみ、投稿とコメント）
  • 編集済み (投稿のみ、コメントのみ、投稿とコメント)
  • モデレートなし (投稿のみ、コメントのみ、投稿とコメント)
• ユーザー管理
  • 禁止されたユーザー
  • ミュートされたユーザー
  • 承認されたユーザー
  • モデレータ
• フレアと絵文字
  • 新しいセンスを加える
  • 編集センス
  • フレアの削除
  • フレアを並べ替える
• 規則と規制
  • 新しいルールを追加
  • ルールの編集
  • ルールの削除
  • 並べ替えルール
• コミュニティ設定
  • コミュニティ名の編集
  • コミュニティの説明を編集する
  • コミュニティトピックを編集する
  • コミュニティ言語を編集する
  • コミュニティのタイプを編集 (パブリック、プライベート、制限付き)
  • コミュニティ領域を編集する
• 投稿とコメントの設定
  • コミュニティスポイラータグの有効化/無効化
  • 投稿の推奨並べ替えを編集する
  • 投稿内の画像を有効/無効にする
• コミュニティ交通
  • 曜日
  • 月
  • ページビュー
  • メンバーが加わりました
  • メンバーが脱退しました

SW8.mp4

SW8.mp4

---

ユーザー設定

• アカウント設定
• プロファイル設定
• メール設定
• 安全性とプライバシーの設定
• 送り設定

SW5.mp4

SW5.mp4

---

## プロジェクトを実行するための主なコマンド: ### プロジェクトのセットアップとパッケージのインストール

 npm install

開発用のコンパイルとホットリロード

 npm run serve

デフォルトでプロジェクトをポート:8081 で実行します。

実稼働用にコンパイルおよび縮小します

 npm run build

プロジェクトは、ビルド後、同じディレクトリの下の/distフォルダーにあります。

単体テストを実行する

 npm run test

このコマンドはすべての単体テストを実行します。

カバレッジレポートの生成

 npm run coverage

このコマンドは、すべてのコンポーネントの詳細を含むカバレッジ レポートのindex.html を生成します。生成されたカバレッジ レポートは、/coverageの下のプロジェクト ディレクトリにあります。

モックサーバーを実行する

 npm run json

ポート:3000 で実行

機能文書レポートの生成

 vuese gen

プロジェクト ディレクトリの/websiteフォルダーにレポートを生成するには

ストアの機能文書レポートを生成する

 npm run jsdoc

プロジェクト ディレクトリの/outフォルダーにレポートを生成するには

ファイルのリントと修正

 npm run lint

よりきれいなファイルとそれを修正する

 npm run prettier

貢献者

アスマー・アデル

メナタル ホッサマルデン

ノーハン・レダ

ホダガマル

アブダルハメデマド

カリム・サケル