Coursera Clone

Courseraクローン

Mern Stackを使用して作成された完全なレスポンシブシングルページアプリケーション！ ？

使用した技術

• 反応します
• ノード
• マンゴDB
• 急行
• redux
• Redis
• 冗談

使用されるデータベース

• マンゴ
• Redis

---

はじめる

リポジトリをローカル環境にクローンすると、バックエンドとフロントエンドのすべての依存関係を分離する必要があります。

バックエンドの場合は、バックエンドフォルダー（CDバックエンド）に移動し、 npm i

• mongodbをインストールします

• または、ウェブサイトを使用できます

• 環境変数を追加します

• バックエンドフォルダーのルートディレクトリに.ENVファイルを作成し、構成ファイル変数に関してそこにトークンを追加します。

  • access_token_secret = "いくつかの秘密"
  • Access_token_life = time
  • refresh_token_secret = "いくつかの秘密"
  • refress_token_life = time
  • sendgrid_key = ""
  • mongo_database = ""
  • oauth2client = ""
  • stripe_secret_token = ""
  • redis_host = ""
  • redis_password = ""
  • redis_port = ""

注：.ENVファイル変数が、下の画像のような構成ファイルの変数と一致することを確認してください。

フロントエンドの場合は、フロントエンドフォルダー（CDフロントエンド）に移動し、 npm i

開発環境を実行するには、 npm startコマンドを使用できます。これにより、Frontend用のポート3000の開発Webサーバーと、ポート8080のNodemon-Watched API Serverが起動します。

注：バックエンドとフロントエンドのNPMスタートをセパレートする必要があります。

単体テスト

コマンド（NPMテスト）を使用して、バックエンド、エクスプレスエンドポイントをテストできます

Dockerは作曲します

CourseraクローンはDockerisedとDocker Hubリポジトリをご覧くださいhttps://hub.docker.com/repository/docker/ayushverma/coursera/general

DockerとDocker Composeを使用する場合、次のプロジェクト全体を開始できます。

 docker-compose up

---

？特徴

学生

• サインアップ、ログイン、OTP検証、再送信otp、パスワードを忘れた認証システム（ブートストラップアラートで完全に検証）
• React-Google-LoginとGoogle Auth-Libraryを使用したGoogle認証（OAUTH2）
• コースを購入するためにバックエンドと統合されたストライプ支払いゲートウェイ
• 州を簡単に管理するためのReduxストア
• コースがカテゴリー的にフェッチされているホームページ
• ユーザーの好みに基づいた推奨コース
• コースの評価
• ユーザーがブックマークを削除または追加できるブックマークされたコース
• リソースをダウンロード（PDF-ノート）
• ビデオのレスポンシブReactビデオプレーヤー
• 進捗バー
• コースのすべてのコンテンツを備えたコースページ
• コースと教師に基づいて検索
• リアルタイムのライブグループクラス

教師

• サインアップ、ログイン、OTP検証、再送信otp、パスワードを忘れた適切な認証システム（ブートストラップアラートで完全に検証された）
• 記述、タイトル、画像、その他の詳細を備えた完全に検証された教師アップロードフォーム
• 異なる見出し、段落、太字、斜体、リンク、テーブル、サイズなどを追加する能力を備えたテキストボックスで書くためのckeditor
• 先生は、アップロードバーを使用して最大5つのビデオをアップロードして進捗状況を示すことができます
• 教師はアップロードされたコースを見ることができます
• 先生はコースを削除できます
• 先生はコースを編集できます

ExpressエンドポイントにJestとSupertestを使用したテスト。

socket.ioを使用したリアルタイムのライブグループクラスとキャッシュメッセージ用のRedisで最適化

スクリーンショット

認証ページ

サインアップページ

ログインページ

OTPおよび再送信OTPページ

パスワードページを忘れました

---

メイン画面

ホームページ

コースページ

ブックマークページ

支払いチェックアウトページ

ライブクラスページ

優先ページ

教師のコース

先生のアップロードの詳細

先生のアップロードビデオ

---

レスポンシブデザイン

モバイル設計認証

モバイルデザインコースページ