Bombie is a drag-and-drop builder for Material-UI components in React, designed to streamline the creation of React components through an intuitive interface. This tool allows users to visually assemble Material-UI components and generate corresponding React code, significantly simplifying the development process.

• Drag-and-Drop Interface: Easily drag and drop Material-UI components to build complex UIs.
• Code Generation: Automatically generate React component code based on the visual layout.
• Component Customization: Customize properties of Material-UI components directly within the interface.
• Real-time Preview: View the real-time preview of the UI as you build and customize components.

1. Clone the Repository:

   git clone https://github.com/amith-moorkoth/bombie.git
   
   

2. **Navigate to the Project Directory:

   cd bombie

3. **Install Dependencies:

   npm install

4. **Start the Development Server:

    npm start

5. **Access the Application: Open your browser and navigate to http://localhost:8080/generate-component to start using Bombie.

Form Engine Builder

This project is for demonstration purposes. For production usage, further optimization and development may be required.

Please consider supporting this project for further development. Stay tuned for updates!

1. Purpose and Features:

   • Bombie is designed for creating React components using a JSON-based approach.
   • It leverages React DND (Drag and Drop) and Material UI.
   • The project is intended for demo purposes and is not recommended for production use.
   • Feedback is welcome to improve the toolkit.

2. Workflow Overview:

   • The main entry point is src/Controller/ComponentGenerator/index.js, where the context provider for the entire application is set up.
   • The actual screen rendering happens in src/Lib/ComponentGenerator/index.js, which consists of two frames: Drawer and DND Provider.
   • The Drawer displays the JSON data generated through drag-and-drop interactions.
   • The DND Provider shows available elements that can be dragged and dropped into the Drawer for component design.
   • The recursive container (src/Lib/ComponentGenerator/Container/element-recursion.js) attaches the respective DOM elements based on requirements.

3. Why JSON-Based React Material Toolkit?:

   • Bombie aims to address the need for drag-and-drop design functionality.
   • By storing React components as JSON in databases (e.g., MongoDB), developers can access them anywhere using a single library in React or JavaScript.
   • This approach optimizes performance and reduces page loading overhead.
   • Designers gain control over a significant portion of the development lifecycle.