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 utilizes a drag and drop canvas which allows the user to map out and visualize the layout of their codebase, whether it be customized React Components or simple HTML elements. As you drag your code to the canvas, our code editor updates to give you a clear picture of each component and its children, formatted for jsx.
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 your project to your local environment, all neatly bundled up and ready to go.
Included in that bundle are all the boilerplate files needed for your application. You will have all the custom React components you created, baseline CSS styles, an index.html file, and a webpack, set up for easy access.
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.
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 at fflow.dev and visit our GitHub repo to see our roadmap for the future.
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 on LinkedIn — we’d love to hear what you think!
