Git Product home page Git Product logo

abhibagul / wix-clone Goto Github PK

View Code? Open in Web Editor NEW
38.0 4.0 18.0 8.64 MB

Full functional Wix clone created in react. Has drag drop functionality along with animations.

Home Page: https://wixclone.onrender.com/

License: MIT License

HTML 0.44% JavaScript 85.16% CSS 14.40% Procfile 0.01%
builder javascript react webdesign webpage website website-design website-template website-building-platform diy-website-builder

wix-clone's Introduction

Wix Clone

Wix Clone

Full functional Wix clone created in React, express and MongoDB. Has drag drop functionality, managing pages, settings along with animations, image search etc..

Features

  • Drag and drop interface
  • Create multi page website
  • Pexels image search, so finding correct royalty free image is easy.
  • Has inbuilt animation effects which can be applied anywhere
  • Can create custom layouts
  • Creates the user generated website preveiew to show on their dashboard.
  • Nesting of elements is possible.
  • Layers panel with hover effect shownn on the element
  • Publishing the user website on unique link to user
  • Responsive preview for the user generated pages
  • Google font manager, to manage google fonts for the page at single place.
  • Detailed element editing options
  • Layout modification options
  • SEO settings like page title, description, favicon along with the preview. (To be implemented)
  • CSS Gradients creator for the background
  • Element min height adjuster
  • preview page for unpublished websites, which will only show preview to authorized user.
  • Website management dashboard

How to run

Frontend

  1. npm install -y to install the required dependecies.
  2. Create the .env file in the directory with the following 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 to create a build version of the front-end.
  4. (If you want to modify the frontend you cannpm start the frontend and npm run dev for the backend)

Backend

  1. Copy the build folder generated into the backend folder.
  2. cd backend/ go in the backend folder.
  3. npm install -y to install the dependencies
  4. Create the .env file in the directory with the following 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 to run on a local machine. For deployment use node ./src/server.js
  6. It should be available on the port 8000.

wix-clone's People

Contributors

abhibagul avatar jzwerling avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

wix-clone's Issues

Cant able to run the project

It is showing this kind of error sir, kindly tell me what should I do so that it will run succesfully.

[email protected] dev /projects/novac-side-projects/novac-builder/backend

nodemon --exec babel-node -r dotenv/config ./src/server.js

[nodemon] 2.0.20
[nodemon] to restart at any time, enter rs
[nodemon] watching path(s): .
[nodemon] watching extensions: js,mjs,json
[nodemon] starting babel-node -r dotenv/config ./src/server.js
internal/modules/cjs/loader.js:800
throw err;
^

Error: Cannot find module '/projects/novac-side-projects/novac-builder/backend/dotenv/config'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
at Function.Module._load (internal/modules/cjs/loader.js:690:27)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at Object. (/projects/novac-side-projects/novac-builder/backend/node_modules/babel-cli/lib/_babel-node.js:154:22)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at internal/main/run_main_module.js:17:11 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
[nodemon] app crashed - waiting for file changes before starting...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.