Speed Build Last updated: 2021-10-23

In this project, we built a low-code app builder with React and ReactFlow. The intention is to cover concepts like component-to-component communication as well as dynamic component rendering.

Additionally, we'll also cover the proper way to incorporate 3rd-party libraries and components into an application.

Quick Demo

Code

The whole project's codebase is available at GitHub.

View on GitHub.

Tech Stack

  • React - the main frontend library used in the app.
  • ReactFlow - the 3rd-party library used to render interactive diagrams.

Wireframes

In this section, we'll look at the component wireframe for Speed Build.

Homepage Wireframe
  • Sidebar - contains the toolbox where the user can drag diagram nodes from.
  • DiagramAdapter - renders the nodes representing the output application.
  • PropertyPanel - this is actually only a placeholder. Depending on the selected node in the diagram, the component rendered in this placeholder will differ.
  • CodeDisplay - renders the generated code based on the nodes in the diagram.
DiagramAdapter Wireframe

The DiagramAdapter is the adapter component wrapping the ReactFlow component. This adapter component abstracts the main application from the ReactFlow library.

PropertyPanel Wireframe

The PropertyPanel is the dynamically rendered component. The rendered component will vary depending on the active element selected in the Canvas.