<div align="center"> <a href="https://github.com/oslabs-beta/fflow"> <img src="./src/assets/GitHub_README_logo.png" alt="Logo"> </a> <h3 align="center">fflow</h3> Supercharge your React development process <a href="https://github.com/oslabs-beta/fflow">Explore the docs »</a> <a href="https://github.com/oslabs-beta/fflow/#about-fflow">View Demo</a> · <a href="https://github.com/oslabs-beta/fflow/issues">Report Bug</a> · <a href="https://github.com/oslabs-beta/fflow/issues">Request Feature</a> </div> <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/oslabs-beta/fflow?color=brightgreen"> <img alt="GitHub license" src="https://img.shields.io/github/license/oslabs-beta/fflow?color=blue"> <img alt="GitHub issues" src="https://img.shields.io/github/issues/oslabs-beta/fflow?color=yellow"> <img alt="Contributions Welcome" src="https://img.shields.io/badge/contributions-welcome-orange"> Give a ⭐️ if our project helped or interests you! <details open> <summary>Table of Contents</summary> <ol> <li> <a href="#about">About fflow</a> <ul> <li><a href="#features">Features</a></li> <li><a href="#built-with">Built With</a></li> </ul> </li> <li> <a href="#getting-started">Getting Started</a> <ul> <li><a href="#production-mode">Production Mode</a></li> <li><a href="#development-mode">Development Mode</a></li> </ul> </li> <li><a href="#run-exported-project">Run Exported Project</a></li> <li><a href="#contributors">Contributors</a></li> <li><a href="#roadmap">Roadmap</a></li> <li><a href="#contributing-guide">Contributing Guide</a></li> <li><a href="#license">License</a></li> </ol> </details>

About fflow

React is the most popular library used by frontend developers today. Yet, getting a React application started requires a too much boilerplate code and unnecessary time.

fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI. It combines the most compelling features of Create React App, React ES6 snippets, and a beautiful user experience. We are really excited to launch this alpha version and hope you will download, play around with it, and provide us with feedback.

Here is a medium article describing the philosophy behind fflow and you can download it here.

Visit our website here 👉 https://fflow.dev

Features

Drag, Drop, Reorder and Delete HTML Tags
Create Custom React Components
Light and Dark Theme based on OS Preferences and Manual Toggle
Delete Project and Clear Canvas to restart build process
Live preview in Code editor
Interactable CSS Code Editor
Easily switch between files with file tree or on the canvas
Easy redirect to App.jsx by clicking on the fflow icon
Export app with preconfigured and versatile webpack
In-built terminal initializes an instance of the exported app without leaving fflow
Accessibility features including canvas item highlighting when the HTML tag or Component is picked up

Built with

(<a href="#top">back to top</a>)

Loading Screen

Light and Dark Mode

Create Custom Components and Nest HTML elements

Edit CSS directly in the App (Currently only on Mac version)

💫💫 Coming soon to Windows 💫💫 <img src="./src/assets/cssEditor.gif">

Export Working Project

Clear canvas to start from scratch

Getting Started

The following instructions are split into two sections for:

Production Mode
Development Mode

Production Mode

Please download the latest release of fflow for MacOS or Windows.

💫 Linux version coming soon. 💫

Mac users: After opening the dmg and dragging fflow into your Applications folder, CTL + Click the icon and 'Open' from the context menu to open the app. This extra step is necessary since we don't have an Apple developer license yet.
Windows users: Install the application by running fflow setup 1.0.0.exe.

Clone this repo

Clone this repo git clone https://github.com/oslabs-beta/fflow
Install the dependencies npm install
On a Mac, run ./node_modules/.bin/electron-rebuild in your terminal or .\node_modules\.bin\electron-rebuild.cmd on Windows
Run script for development mode npm run start
Build the app (automatic) npm run package
Test the app (after npm run build || yarn run build) npm run prod

Current issues

Note there is currently an issue where the Monaco Code Editor keeps showing 'loading...' in development mode. We are working to solve this. In the meantime, when you drag HTML tags onto canvas you can still see the code editor's contents in the Developer Tools.

Running tests

Electron, React and Redux tests can be run using npm run test

(<a href="#top">back to top</a>)

Run Exported Project

Below is the generated directory structure of the React and Webpack application that is created when you export your application.

├── dist                    # Compiled files
│    └── index.html
├── src                     # Source files
│    └── App.js
│    └── index.js
│    └── styles.css
├── webpack.config.js       # Webpack configuration
├── .babelrc                # Babel configuration
├── .gitignore              # Git ignore file
├── package.json            # Dependencies file
└── README.md               # Boilerplate README file

Using the inbuilt terminal, cd into the Exported Project in your Downloads folder
In the root of the Exported Project folder, install dependencies npm install
Start an instance npm run start
If Localhost:8080 does not open automatically in your default browser, navigate to the specified port to see your running app with Hot Module Reloading and a pre-configured webpack

Add Sass

Adding Sass to your exported project requires updating webpack configs and adding necessary loaders.

Install loaders for sass, sass-loader and node-sass
Add another object to the rules in webpack.config with the following:

 {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }

Rename styles.css to styles.scss

Add Tailwind

Adding Tailwind to your exported project requires updating webpack configs, adding necessary loaders and tailwind config.

Install tailwind as a dependency

npm install tailwindcss

Install postcss-loader and autoprefixer as development dependencies

npm install -D postcss-loader autoprefixer

Copy the following copy into src/styles.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Create a postcss.config.js file and copy the following code in

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

Add 'postcss-loader' to the css rules in webpack.config

Change App Title

This boilerplate names your project Exported Project. You can change the app title by inserting the app title within the <title> </title> tags in index.html.

(<a href="#top">back to top</a>)

Contributors

Rain Hsu @crumblepie | Linkedin
Jake Pino @jakepino | Linkedin
Bryanna DeJesus @BryannaDeJesus | Linkedin
Ronak Hirpara @ronakh130 | Linkedin

Project Links: Github | Linkedin | Media

(<a href="#top">back to top</a>)

Roadmap

Editable JS Code Preview
Nesting HTML elements
GitHub OAuth Integration and online project save
Keyboard shortcuts for Mac and Windows
Export in TypeScript
Save Multiple Projects
Create Custom HTML Elements
Open and compose multiple projects in different windows simultaneously
BrowserView to previe

Fflow

Install / Use

README

About fflow

Features

Built with

Loading Screen

Light and Dark Mode

Create Custom Components and Nest HTML elements

Edit CSS directly in the App (Currently only on Mac version)

Export Working Project

Clear canvas to start from scratch

Getting Started

Production Mode

Clone this repo

Current issues

Running tests

Run Exported Project

Add Sass

Add Tailwind

Change App Title

Contributors

Roadmap