Skip to content

Latest commit

 

History

History
175 lines (116 loc) · 4.24 KB

README.md

File metadata and controls

175 lines (116 loc) · 4.24 KB

Visual Low-Code App Builder

Overview

The Visual Low-Code App Builder is a web-based tool that allows users to create applications visually by dragging and connecting components and logic nodes. The builder outputs a JSON configuration of the designed app, which can be dynamically compiled into a Next.js project for live previews and deployment.

Features

  • Drag-and-Drop Editor: Create and arrange components on a visual canvas.
  • UI and Logic Nodes: Combine visual components like buttons and headers with logic nodes like conditionals and API calls.
  • Live Preview: Instantly view the compiled app inside a preview pane.
  • Export to Next.js: Download the generated app as a complete Next.js project in a .zip file.

Project Structure

/project-root |-- /components | |-- Canvas.js # The drag-and-drop visual editor using React Flow | |-- Sidebar.js # The library of available components and logic nodes | |-- Preview.js # Displays the live preview of the app |-- /pages | |-- index.js # Entry point of the application |-- /utils | |-- jsonParser.js # Parses JSON into React components | |-- exportHelper.js # Generates Next.js project files for export |-- /public |-- /theme.js # MUI theme configuration |-- package.json |-- README.md # Project documentation (this file)

Getting Started

Prerequisites

Ensure you have the following installed on your system:

  • Node.js (>= 14.x)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/visual-low-code-builder.git
cd visual-low-code-builder
-   Install dependencies:

 ```bash

 `npm install`

 -   Run the development server:
    `npm run dev`
    • Open your browser and navigate to http://localhost:3000.

    Usage

Designing Applications

  1. Use the Sidebar to drag and drop components and logic nodes onto the Canvas.
  2. Connect nodes using wires to define data and signal flows.
  3. Adjust properties of components using the settings panel (to be added in future versions).

Live Preview

  • View a live preview of your app in the Preview Pane as you make changes on the canvas.

Exporting Applications

  1. Click the Export button to generate a .zip file containing a Next.js project.

  2. Extract the .zip file and navigate to the folder.

  3. Install dependencies and start the project:

    `npm install
npm run dev`

    JSON Structure

The app builder uses a JSON configuration to define the app. Example:

`{
  "metadata": {
    "title": "My App",
    "description": "A sample app",
    "version": "1.0.0"
  },
  "nodes": [
    {
      "id": "1",
      "type": "header",
      "props": { "text": "Welcome!", "fontSize": "24px", "align": "center" },
      "position": { "x": 100, "y": 50 }
    },
    {
      "id": "2",
      "type": "button",
      "props": { "text": "Click Me", "color": "primary", "onClick": "handleClick" },
      "position": { "x": 150, "y": 150 }
    }
  ],
  "edges": [
    { "source": "2", "target": "1" }
  ],
  "events": {
    "handleClick": "alert('Button clicked!')"
  }
}`

Roadmap

Completed Features

  • Drag-and-drop editor with React Flow
  • JSON serialization and deserialization
  • Live preview of the generated app
  • Export functionality for Next.js projects

Future Enhancements

  • Custom Node Properties: Add a panel for editing node properties.
  • Advanced Logic Nodes: Introduce support for loops, API calls, and state management.
  • User Authentication: Allow users to save and load projects.
  • Cloud Deployment: Directly deploy apps to platforms like Vercel.

Contributing

We welcome contributions! To get started:

  1. Fork the repository.

  2. Create a new branch for your feature:

    `git checkout -b feature-name`

  3. Commit your changes:

    `git commit -m "Add new feature"`

  4. Push to your branch and create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For questions or feedback, please contact [your-email@example.com].