An open-source prototyping tool to assist engineers at every level in building their next React web application

Current Environment

In today’s software engineering landscape, you’ll be hard-pressed to find a more popular JavaScript framework than React. With more and more developers and companies working with this powerful tool every day, the need for more accessibility grows. Now you could just start a new React application with Create React App, it’s incredibly easy. However, your application would come with a TON of extra bloatware which most of the time you simply do not need. The boilerplate code casts a wide net to accommodate all apps, instead of specializing to the individual app’s needs and tucks them deep away into its nested file structure. This was one bottleneck the fflow team felt we could both improve and streamline. The majority of developers use Create React App because it’s so quick and easy to use. If you can keep the efficiency of starting up a basic React application from scratch and remove all the excess, irrelevant files, you arrive at our product.

Introducing fflow

Through a partnership with tech accelerator OS Labs, the team at fflow has developed a tool for engineers that offers the flexibility of building your own application from scratch, while also giving you the same time-saving comfort of something like Create-React-App. We are tremendously excited to announce the alpha launch of our developer tool — fflow — a beautiful and easy-to-use, open-source prototyping tool to assist engineers at every level in building their next React (and soon, TypeScript) web application.

How does it work?

fflow leverages Atlassian's React-Beautiful-DnD to allow developers to map out and visualize the layout of their codebase, whether it be customized React Components or simple HTML elements. As you drag HTML tags onto the canvas, and reorder or delete elements, the familiar code editor bootstrapped by Monaco Editor updates to give you a clear picture of each React component and its children, formatted for jsx.

GIPH: Dragging elements onto the canvas

As your app grows, so does fflow’s file directory of your app, which gives you a clear map of how your app will be organized. If you’d like to scrap any work you’ve done, you can clear individual components or start entirely from scratch by clearing the entire project.

Once you’re satisfied with the foundation of your application, you can export the project to your local environment, all neatly bundled up and ready to go.

Included in that bundle are all the files needed to continue developing in your preferred IDE. You will find downloaded all the custom React components you created, a CSS stylesheets with baseline css styles as well as any other styles you included in the CSS editor, an index.html file, and a webpack configuration, set up for easy access.

GIPH: Adding styles in CSS editor

Your project can then be spun up either by navigating to your project’s directory with your own terminal or by using the one fflow provides for you, immediately allowing one to continue composing their application.

GIPH: Export project and inbuilt terminal

And with that, fflow provides developers with a seamless and expedited process for creating fully customized React web applications, while saving valuable time and legwork in the process. Try it out today, your workflow will thank you.

Download fflow

You can download the alpha version of fflow for Mac or Windows on our website and visit our GitHub repo to support us by starring our repo and contribute to the features on the roadmap.

This is an open-source product and we welcome all contributions from fellow developers — a tool by developers, for developers, is the best way to build something useful. Connect with us and help take fflow to the next level.

Connect with the fflow team

Rain Hsu LinkedIn | GitHub
Bryanna DeJesus LinkedIn | GitHub
Ronak Hirpara LinkedIn | GitHub
Jake Pino LinkedIn | GitHub