หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

โคลน Wix

โคลน Wix ที่ใช้งานได้เต็มรูปแบบสร้างขึ้นใน React, Express และ MongoDB มีฟังก์ชั่นการลากดร็อปการจัดการหน้าการตั้งค่าพร้อมกับภาพเคลื่อนไหวการค้นหารูปภาพ ฯลฯ ..

ตัวอย่าง: https://wixclone.onrender.com/

คุณสมบัติ

  • ลากและวางอินเทอร์เฟซ
  • สร้างเว็บไซต์หลายหน้า
  • การค้นหารูปภาพ Pexels ดังนั้นการค้นหาภาพที่ไม่ได้รับค่าลิขสิทธิ์ที่ถูกต้องเป็นเรื่องง่าย
  • มีเอฟเฟกต์ภาพเคลื่อนไหวที่สามารถนำไปใช้ได้ทุกที่
  • สามารถสร้างเลย์เอาต์ที่กำหนดเองได้
  • สร้างเว็บไซต์ Preveiew ที่สร้างขึ้นเพื่อแสดงบนแดชบอร์ด
  • การทำรังขององค์ประกอบเป็นไปได้
  • แผงเลเยอร์ที่มีเอฟเฟกต์โฮเวอร์แสดงบนองค์ประกอบ
  • การเผยแพร่เว็บไซต์ผู้ใช้บนลิงค์ที่ไม่ซ้ำกับผู้ใช้
  • การตอบสนองตัวอย่างสำหรับผู้ใช้ที่สร้างขึ้น
  • Google Font Manager เพื่อจัดการ Google Fonts สำหรับเพจที่เดียว
  • ตัวเลือกการแก้ไของค์ประกอบโดยละเอียด
  • ตัวเลือกการปรับเปลี่ยนเค้าโครง
  • การตั้งค่า SEO เช่นชื่อเรื่องหน้าคำอธิบาย Favicon พร้อมกับตัวอย่าง (To be implemented)
  • CSS GRADIETS
  • องค์ประกอบตัวปรับความสูงขั้นต่ำ
  • หน้าดูตัวอย่างสำหรับเว็บไซต์ที่ไม่ได้เผยแพร่ซึ่งจะแสดงตัวอย่างให้กับผู้ใช้ที่ได้รับอนุญาตเท่านั้น
  • แดชบอร์ดการจัดการเว็บไซต์

วิธีการวิ่ง

ส่วนหน้า

  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 เพื่อสร้างเวอร์ชันการสร้างของ Front-End
  4. (หากคุณต้องการแก้ไขส่วนหน้าคุณสามารถ npm start ต้น Frontend และ 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
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด