https://github.com/oslabs-beta/fflow
fflow is an easy-to-use open-source tool for all developers to create their React application.
https://github.com/oslabs-beta/fflow
component-hierarchy electron frontend-development javascript jest node-pty prototyping react react-beautiful-dnd react-devtools react-icons react-monaco-editor react-redux react-testing-library reactdevtools reactjs redux-toolkit tailwindui webpack5
Last synced: 22 days ago
JSON representation
fflow is an easy-to-use open-source tool for all developers to create their React application.
- Host: GitHub
- URL: https://github.com/oslabs-beta/fflow
- Owner: oslabs-beta
- License: mit
- Created: 2022-01-14T16:14:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-11T03:40:52.000Z (over 2 years ago)
- Last Synced: 2025-04-30T19:07:48.651Z (22 days ago)
- Topics: component-hierarchy, electron, frontend-development, javascript, jest, node-pty, prototyping, react, react-beautiful-dnd, react-devtools, react-icons, react-monaco-editor, react-redux, react-testing-library, reactdevtools, reactjs, redux-toolkit, tailwindui, webpack5
- Language: JavaScript
- Homepage: https://fflow.dev
- Size: 37.2 MB
- Stars: 127
- Watchers: 4
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
fflow
Supercharge your React development process
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Give a ⭐️ if our project helped or interests you!
Table of Contents
## 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](https://jpino831.medium.com/ease-into-your-next-react-app-with-fflow-f60c5a899817) is a medium article describing the philosophy behind fflow and you can download it [here](https://github.com/oslabs-beta/fflow/releases).
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
- [React.js](https://reactjs.org/)
- [Electron](https://www.electronjs.org/)
- [React-Monaco/Editor](https://github.com/react-monaco-editor/react-monaco-editor)
- [Webpack 5](https://webpack.js.org)
- [TailwindUI](https://tailwindui.com)
- [React–Redux](https://react-redux.js.org)
- [Redux Toolkit](https://redux-toolkit.js.org)
- [React Beautiful DnD](https://github.com/atlassian/react-beautiful-dnd)
- [React Icons](https://react-icons.github.io/react-icons/)
- [Xterm.js](https://xtermjs.org/)
- [node-pty](https://www.npmjs.com/package/node-pty)
- [Jest](https://jestjs.io)
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
### 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 💫💫
### Export Working Project
### Clear canvas to start from scratch
## Getting Started
The following instructions are split into two sections for:
- [Production Mode](#production-mode)
- [Development Mode](#development-mode)
## Production Mode
Please download the latest release of fflow for [MacOS](https://github.com/oslabs-beta/fflow/releases) or [Windows](https://github.com/oslabs-beta/fflow/releases).
💫 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
1. Clone this repo `git clone https://github.com/oslabs-beta/fflow`
2. Install the dependencies `npm install`
3. On a Mac, run `./node_modules/.bin/electron-rebuild` in your terminal or `.\node_modules\.bin\electron-rebuild.cmd` on Windows
4. Run script for development mode `npm run start`
5. Build the app (automatic) `npm run package`
6. 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`
## 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
```
1. Using the inbuilt terminal, `cd` into the Exported Project in your `Downloads` folder
2. In the root of the Exported Project folder, install dependencies `npm install`
3. Start an instance `npm run start`
4. 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.
1. Install loaders for sass, `sass-loader` and `node-sass`
2. Add another object to the rules in `webpack.config` with the following:
```javascript
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
```
3. Rename `styles.css` to `styles.scss`
### Add Tailwind
Adding Tailwind to your exported project requires updating webpack configs, adding necessary loaders and tailwind config.
1. Install tailwind as a dependency
```
npm install tailwindcss
```
2. Install postcss-loader and autoprefixer as development dependencies
```
npm install -D postcss-loader autoprefixer
```
3. Copy the following copy into `src/styles.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
4. Create a `postcss.config.js` file and copy the following code in
```javascript
module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')],
};
```
5. 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 ` ` tags in `index.html`.
## Contributors
- Rain Hsu [@crumblepie](https://github.com/crumblepie) | [Linkedin](https://www.linkedin.com/in/rainhsu/)
- Jake Pino [@jakepino](https://github.com/jakepino) | [Linkedin](https://www.linkedin.com/in/jakepino/)
- Bryanna DeJesus [@BryannaDeJesus](https://github.com/BryannaDeJesus) | [Linkedin](https://www.linkedin.com/in/bryannadejesus/)
- Ronak Hirpara [@ronakh130](https://github.com/ronakh130) | [Linkedin](https://www.linkedin.com/in/ronak-hirpara/)
Project Links: [Github](https://github.com/oslabs-beta/fflow) | [Linkedin](https://www.linkedin.com/company/fflowdev) | [Media](https://jpino831.medium.com/ease-into-your-next-react-app-with-fflow-f60c5a899817)
## 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 preview project
- Live Editing with other collaborators
- AWS hosted version
## Contributing Guide
Contributions are what make the open source community an amazing place to learn, inspire, and create. Any contributions are greatly appreciated.
If you have a suggestion of how to make fflow better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
1. Fork this repo
2. Create your Feature Branch (`git checkout -b` yourgithubhandle/AmazingFeature)
3. Commit your Changes (`git commit -m` 'Add some AmazingFeature')
4. Create and push to your remote branch (`git push origin` yourgithubhandle/AmazingFeature)
5. Open a Pull Request
## License
Licensed under MIT License © [fflow](fflow.dev).