Mini Page Builder

This project was authored by Rahul Sharma.

Instructions to run the code locally:

This project was built using Node v14.21.3 and React v18.2.0. Try to fulfill these technical requirements before running the app, although a few versions down/up also wont hurt.

After cloning the project,

• Navigate to the project directory
• Run npm i or npm install
• Run npm run start
• Open http://localhost:3000 to view it in your browser.

How the project works?

This project is a basic example of a page builder, in which user has the option to build a page's layout using three types of blocks - Label, Input and Text. Here is a basic example of how to do the same:

• Click and hold a block from the sidebar named Blocks
• Drag it over to the blank drop area and drop it wherever you want to place it.
• Upon dropping, a modal will pop up asking for basic configuration details of the block. Fill those correctly.
• Click on Save Changes. You will then see the block placed on the blank area.
• All blocks can be moved around in the blank area.
• To edit a block after placing it, click on it once and press Enter. Then fill the details in the modal that pops up and click Save Changes.
• To delete a block, click on it once and press Delete/Backspace. This will remove it from the area.
• Whatever you place in the blank area will remain there despite page refresh or browser tab close.