Wix Clone

wix 클론

React, Express 및 MongoDB에서 생성 된 전체 기능 Wix 클론. 드롭 드롭 기능, 페이지 관리, 애니메이션, 이미지 검색 등이 있습니다.

데모 : https://wixclone.onrender.com/

특징

• 드래그 앤 드롭 인터페이스
• 멀티 페이지 웹 사이트를 만듭니다
• Pexels 이미지 검색이므로 올바른 로열티 무료 이미지를 찾는 것은 쉽습니다.
• 어디서나 적용 할 수있는 애니메이션 효과가 내장되어 있습니다
• 사용자 정의 레이아웃을 만들 수 있습니다
• 대시 보드에 표시하기 위해 사용자 생성 된 웹 사이트 사전보기를 생성합니다.
• 요소의 중첩이 가능합니다.
• 요소에 호버 효과가 표시된 층 패널
• 사용자에 대한 고유 링크에 사용자 웹 사이트를 게시합니다
• 사용자 생성 페이지의 응답 미리보기
• Google Font Manager, 단일 장소의 페이지 용 Google 글꼴을 관리합니다.
• 자세한 요소 편집 옵션
• 레이아웃 수정 옵션
• Page Title, Description, Favicon 및 미리보기와 같은 SEO 설정. (To be implemented)
• 배경에 대한 CSS 그라디언트 제작자
• 요소 최소 높이 조정기
• 미공개 웹 사이트의 미리보기 페이지는 공인 사용자에게 미리보기 만 표시됩니다.
• 웹 사이트 관리 대시 보드

달리는 방법

프론트 엔드

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. (프론트 엔드를 수정하려면 npm run dev npm start 수 있습니다.

백엔드

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에서 사용할 수 있어야합니다.