Wix Clone

Wix克隆

在React，Express和MongoDB中創建的完整功能性WIX克隆。具有拖放功能，管理頁面，設置以及動畫，圖像搜索等。

演示：https：//wixclone.onrender.com/

特徵

• 拖動接口
• 創建多頁網站
• PEXELS圖像搜索，因此找到正確的免版稅圖像很容易。
• 具有內置的動畫效果，可以在任何地方應用
• 可以創建自定義佈局
• 創建用戶生成的網站預圖，以在其儀表板上顯示。
• 元素的嵌套是可能的。
• 具有懸停效果的圖層面板在元素上顯示
• 在唯一鏈接上發布用戶網站
• 用戶生成的頁面的響應式預覽
• Google字體管理器，用於在單個地方管理該頁面的Google字體。
• 詳細的元素編輯選項
• 佈局修改選項
• SEO設置，例如頁面標題，描述，Favicon以及預覽。 (To be implemented)
• CSS漸變創建者
• 元素最小高度調節器
• 未發表的網站的預覽頁面，該頁面只會向授權用戶顯示預覽。
• 網站管理儀表板

如何運行

前端

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上可用。