Wix Clone

Wix Clone

Полный функциональный клон WIX, созданный в React, Express и MongoDB. Имеет функциональность DRAG Drop, управление страницами, настройки вместе с анимацией, поиск изображений и т. Д.

Демо: https://wixclone.onrender.com/

Функции

• Перетаскивать интерфейс
• Создать многостраничный веб -сайт
• Поиск изображения Pexels, поэтому найти правильное изображение без роялти легко.
• Имеет встроенные эффекты анимации, которые можно применять в любом месте
• Может создать пользовательские макеты
• Создает сгенерированный пользователем веб -сайт PreVeew, чтобы показать на своей панели инструментов.
• Гнездование элементов возможно.
• Панель слоев с эффектом падения, показанного на элементе
• Публикация пользовательского веб -сайта по уникальной ссылке на пользователя
• Адаптивный предварительный просмотр для страниц, сгенерированных пользователем
• Google Font Manager, чтобы управлять шрифтами Google для страницы на одном месте.
• Подробные варианты редактирования элементов
• Параметры модификации макета
• Настройки SEO, такие как заголовок страницы, описание, Favicon, а также предварительный просмотр. (To be implemented)
• CSS Gradients Creator для фона
• Настройка высоты элемента MIN
• Предварительный просмотр неопубликованных веб -сайтов, которые будут показывать предварительный просмотр только авторизованному пользователю.
• Панель управления веб -сайтами

Как бежать

Внешний интерфейс

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. (Если вы хотите изменить Frontend, вы можете npm start Frontend и npm run dev для бэкэнда)

Бэкэнд

1. Скопируйте папку сборки, сгенерированную в папку Backend.
2. cd backend/ Go в бэкэнд -папке.
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.