Wix Clone

Clon wix

Clon WIX funcional completo creado en React, Express y MongoDB. Tiene la funcionalidad de arrastre, la gestión de páginas, la configuración junto con las animaciones, la búsqueda de imágenes, etc.

Demostración: https://wixclone.onrender.com/

Características

• Arrastre y suelte la interfaz
• Crear sitio web de múltiples páginas
• La búsqueda de imágenes de Pexels, por lo que encontrar una imagen correcta libre de regalías es fácil.
• Tiene efectos de animación incorporados que se pueden aplicar en cualquier lugar
• Puede crear diseños personalizados
• Crea el sitio web generado por el usuario PreView para mostrar en su tablero.
• La anidación de elementos es posible.
• Panel de capas con efecto de desplazamiento que se muestra en el elemento
• Publicar el sitio web del usuario en un enlace único al usuario
• Vista previa receptiva para las páginas generadas por el usuario
• Google Font Manager, para administrar las fuentes de Google para la página en un solo lugar.
• Opciones de edición de elementos detallados
• Opciones de modificación de diseño
• Configuración de SEO como título de página, Descripción, Favicon junto con la vista previa. (To be implemented)
• Creador de gradientes de CSS para el fondo
• Elemento mínimo ajustador de altura
• Página de vista previa para sitios web no publicados, que solo mostrarán una vista previa al usuario autorizado.
• Panel de gestión de sitios web

Cómo correr

Interfaz

1. npm install -y para instalar las dependientes requeridas.
2. Cree el archivo .env en el directorio con los siguientes detalles.
   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 para crear una versión de compilación del front-end.
4. (Si desea modificar el frontend, puede npm start el npm run dev para el backend)

Backend

1. Copie la carpeta de compilación generada en la carpeta de backend.
2. cd backend/ ir en la carpeta de backend.
3. npm install -y para instalar las dependencias
4. Cree el archivo .env en el directorio con los siguientes detalles.
   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 para ejecutar en una máquina local. Para la implementación, use node ./src/server.js
6. Debería estar disponible en el puerto 8000.