Wix Clone

Wix -Klon

Voll funktionierender Wix -Klon, das in React, Express und MongoDB erzeugt wurde. Hat Drag Drop -Funktionalität, Verwaltung von Seiten, Einstellungen sowie Animationen, Bildsuche usw.

Demo: https://wixclone.onrender.com/

Merkmale

• Drag & Drop -Schnittstelle
• Erstellen Sie mehrseitige Website
• Die Bildsuche von Pexels, also ist es einfach, korrektes lizenzfreies Bild zu finden.
• Hat eingebaute Animationseffekte, die überall angewendet werden können
• Kann benutzerdefinierte Layouts erstellen
• Erstellt die von Benutzer generierte Website -PreView, um sie in ihrem Dashboard anzuzeigen.
• Das Nisten von Elementen ist möglich.
• Ebenenschichtplatte mit dem auf dem Element gezeigten Schwebeffekt
• Veröffentlichen Sie die Benutzerwebsite auf eindeutigem Link zum Benutzer
• Responsive Vorschau für die von Benutzer generierten Seiten
• Google Font Manager, um Google -Schriftarten für die Seite an einzelnen Ort zu verwalten.
• Detaillierte Elementbearbeitungsoptionen
• Layout -Änderungsoptionen
• SEO -Einstellungen wie Seitentitel, Beschreibung, Favicon zusammen mit der Vorschau. (To be implemented)
• CSS -Absolventenschöpfer für den Hintergrund
• Element min Höhenanmieter
• Vorschau -Seite für unveröffentlichte Websites, auf denen der autorisierte Benutzer nur eine Vorschau anzeigt.
• Website -Management -Dashboard

Wie man rennt

Frontend

1. npm install -y um die erforderlichen Abhängigkeiten zu installieren.
2. Erstellen Sie die .env -Datei im Verzeichnis mit den folgenden Details.
   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 , um eine Build-Version des Front-Ends zu erstellen.
4. (Wenn Sie den Frontend ändern möchten, können Sie NPM mit dem Frontend und npm run dev für das Backend npm start .)

Backend

1. Kopieren Sie den Build -Ordner, der in den Backend -Ordner erzeugt wird.
2. cd backend/ Gehen Sie im Backend -Ordner.
3. npm install -y um die Abhängigkeiten zu installieren
4. Erstellen Sie die .env -Datei im Verzeichnis mit den folgenden Details.
   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 zum Laufen auf einer lokalen Maschine. Verwenden Sie für die Bereitstellung node ./src/server.js
6. Es sollte auf dem Port 8000 verfügbar sein.