Wix Clone

Klon wix

Klon Wix fungsional penuh dibuat dalam React, Express dan MongoDB. Memiliki fungsionalitas drop drop, mengelola halaman, pengaturan bersama dengan animasi, pencarian gambar dll.

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

Fitur

• Seret dan Jatuhkan Antarmuka
• Buat situs web multi -halaman
• Pencarian gambar pexels, jadi menemukan gambar bebas royalti yang benar mudah.
• Memiliki efek animasi bawaan yang dapat diterapkan di mana saja
• Dapat membuat tata letak khusus
• Membuat Situs Web yang Dibuat Pengguna Preveiew untuk ditampilkan di dasbor mereka.
• Sarang elemen dimungkinkan.
• Panel lapisan dengan efek hover ditunjukkan pada elemen
• Menerbitkan situs web pengguna di tautan unik ke pengguna
• Pratinjau responsif untuk halaman yang dihasilkan pengguna
• Google Font Manager, untuk mengelola Google Fonts untuk halaman di satu tempat.
• Opsi Pengeditan Elemen Detail
• Opsi modifikasi tata letak
• Pengaturan SEO seperti judul halaman, deskripsi, favicon bersama dengan pratinjau. (To be implemented)
• Pencipta Gradien CSS untuk latar belakang
• Elemen Min Tinggi Adjuster
• Halaman pratinjau untuk situs web yang tidak dipublikasikan, yang hanya akan menampilkan pratinjau kepada pengguna yang berwenang.
• Dasbor Manajemen Situs Web

Bagaimana menjalankan

Frontend

1. npm install -y untuk menginstal ketergantungan yang diperlukan.
2. Buat file .env di direktori dengan detail berikut.
   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 untuk membuat versi build dari front-end.
4. (Jika Anda ingin memodifikasi frontend, Anda dapat npm start npm run dev untuk backend)

Backend

1. Salin folder build yang dihasilkan ke folder backend.
2. cd backend/ Go di folder backend.
3. npm install -y untuk menginstal dependensi
4. Buat file .env di direktori dengan detail berikut.
   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 untuk dijalankan di mesin lokal. Untuk penempatan penggunaan node ./src/server.js
6. Itu harus tersedia di port 8000.