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