Wix Clone

WIXクローン

React、Express、Mongodbで作成された完全な機能WIXクローン。ドラッグドロップ機能、ページの管理、設定、アニメーション、画像検索などがあります。

デモ：https：//wixclone.onrender.com/

特徴

• インターフェイスをドラッグアンドドロップします
• マルチページWebサイトを作成します
• ペクセルの画像検索なので、正しいロイヤリティフリーの画像を見つけるのは簡単です。
• どこにでも適用できるアニメーション効果が組み込まれています
• カスタムレイアウトを作成できます
• ユーザー生成されたWebサイトpreveiewを作成して、ダッシュボードに表示します。
• 要素のネストが可能です。
• 要素に示されているホバー効果を備えたレイヤーパネル
• ユーザーへの一意のリンクでユーザーWebサイトを公開します
• ユーザー生成ページのレスポンシブプレビュー
• Googleフォントマネージャー、シングルプレイスのページのGoogleフォントを管理します。
• 詳細な要素編集オプション
• レイアウト変更オプション
• Pageタイトル、説明、FaviconなどのSEO設定とプレビュー。 (To be implemented)
• 背景のCSSグラデーションクリエーター
• Element Min Height Adjuster
• 未発表のWebサイトのプレビューページ。これは、認定ユーザーにプレビューのみを表示します。
• ウェブサイト管理ダッシュボード

実行方法

フロントエンド

1. npm install -y必要な依存関係をインストールします。
2. 次の詳細を記載したディレクトリに.envファイルを作成します。
   REACT_APP_GOOGLE_API_KEY="[Google font API KEY : https://developers.google.com/fonts/docs/developer_api]"
REACT_APP_PEXELS_API_KEY="[Pexels API key : https://www.pexels.com/api/]"
   
3. npm run build 、フロントエンドのビルドバージョンを作成します。
4. （フロントエンドを変更する場合は、 npm startバックエンド用にフロントエンドとnpm run dev起動することができます）

バックエンド

1. 生成されたビルドフォルダーをバックエンドフォルダーにコピーします。
2. cd backend/バックエンドフォルダーに移動します。
3. npm install -yに依存関係をインストールします
4. 次の詳細を記載したディレクトリに.envファイルを作成します。
   JWT_SECRET=" [RANDOM STRING USED TO CREATE JWT TOKEN ]"
PORT=8000
API_DB_NAME="[DATABASE_NAME]"
API_LOGIN_PERIOD="2d"
API_MONGO_URI="[ REMOVED FROM THE CODE ]"
API_MONGO_PASS="[ MONGODB PASSWORD ]"
API_MONGO_USER="[ MONGO DB NAME ]"
API_MONGO_LOCATION="[ mongodb for local instance, mongodb+srv for remote "]
   
5. npm run devローカルマシンで実行されます。展開にはnode ./src/server.jsを使用します
6. ポート8000​​で利用できるはずです。