{"id":13577952,"url":"https://github.com/oslabs-beta/fflow","last_synced_at":"2025-04-30T19:08:39.742Z","repository":{"id":43269299,"uuid":"448029591","full_name":"oslabs-beta/fflow","owner":"oslabs-beta","description":"fflow is an easy-to-use open-source tool for all developers to create their React application. ","archived":false,"fork":false,"pushed_at":"2022-10-11T03:40:52.000Z","size":39035,"stargazers_count":127,"open_issues_count":2,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-30T19:07:48.651Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://fflow.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-14T16:14:21.000Z","updated_at":"2024-10-06T18:09:30.000Z","dependencies_parsed_at":"2023-01-19T20:19:00.315Z","dependency_job_id":null,"html_url":"https://github.com/oslabs-beta/fflow","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Ffflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Ffflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Ffflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2Ffflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/fflow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251767187,"owners_count":21640469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-08-01T15:01:25.665Z","updated_at":"2025-04-30T19:08:39.711Z","avatar_url":"https://github.com/oslabs-beta.png","language":"JavaScript","readme":"\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/oslabs-beta/fflow\"\u003e\n    \u003cimg src=\"./src/assets/GitHub_README_logo.png\" alt=\"Logo\"\u003e\n  \u003c/a\u003e\n\n\u003ch3 align=\"center\"\u003efflow\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003cstrong\u003eSupercharge your React development process\u003c/strong\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/fflow\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/oslabs-beta/fflow/#about-fflow\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/oslabs-beta/fflow/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/oslabs-beta/fflow/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"GitHub Repo stars\" src=\"https://img.shields.io/github/stars/oslabs-beta/fflow?color=brightgreen\"\u003e\n  \u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/oslabs-beta/fflow?color=blue\"\u003e\n  \u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/oslabs-beta/fflow?color=yellow\"\u003e\n  \u003cimg alt=\"Contributions Welcome\" src=\"https://img.shields.io/badge/contributions-welcome-orange\"\u003e  \n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  Give a ⭐️ if our project helped or interests you!\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cdetails open\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about\"\u003eAbout fflow\u003c/a\u003e\n      \u003cul\u003e\n       \u003cli\u003e\u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#production-mode\"\u003eProduction Mode\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#development-mode\"\u003eDevelopment Mode\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#run-exported-project\"\u003eRun Exported Project\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributors\"\u003eContributors\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing-guide\"\u003eContributing Guide\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n## About fflow\n\nReact 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.\n\nfflow 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.\n\n[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).\n\nVisit our website here 👉 https://fflow.dev\n\n\u003cimg src=\"./src/assets/dnd.gif\"\u003e\n\n### Features\n\n- Drag, Drop, Reorder and Delete HTML Tags\n- Create Custom React Components\n- Light and Dark Theme based on OS Preferences and Manual Toggle\n- Delete Project and Clear Canvas to restart build process\n- Live preview in Code editor\n- Interactable CSS Code Editor\n- Easily switch between files with file tree or on the canvas\n- Easy redirect to App.jsx by clicking on the fflow icon\n- Export app with preconfigured and versatile webpack\n- In-built terminal initializes an instance of the exported app without leaving fflow\n- Accessibility features including canvas item highlighting when the HTML tag or Component is picked up\n\n### Built with\n\n- [React.js](https://reactjs.org/)\n- [Electron](https://www.electronjs.org/)\n- [React-Monaco/Editor](https://github.com/react-monaco-editor/react-monaco-editor)\n- [Webpack 5](https://webpack.js.org)\n- [TailwindUI](https://tailwindui.com)\n- [React–Redux](https://react-redux.js.org)\n- [Redux Toolkit](https://redux-toolkit.js.org)\n- [React Beautiful DnD](https://github.com/atlassian/react-beautiful-dnd)\n- [React Icons](https://react-icons.github.io/react-icons/)\n- [Xterm.js](https://xtermjs.org/)\n- [node-pty](https://www.npmjs.com/package/node-pty)\n- [Jest](https://jestjs.io)\n- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Loading Screen\n\n\u003cimg src=\"./src/assets/splashDemo.gif\"\u003e\n\n### Light and Dark Mode\n\n\u003cimg src=\"./src/assets/darkMode.gif\"\u003e\n\n### Create Custom Components and Nest HTML elements\n\n\u003cimg src=\"./src/assets/customComps.gif\"\u003e\n\n### Edit CSS directly in the App (Currently only on Mac version)\n\n💫💫 Coming soon to Windows 💫💫\n\u003cimg src=\"./src/assets/cssEditor.gif\"\u003e\n\n### Export Working Project\n\n\u003cimg src=\"./src/assets/export.gif\"\u003e\n\n### Clear canvas to start from scratch\n\n\u003cimg src=\"./src/assets/clearCanvas.gif\"\u003e\n\n## Getting Started\n\nThe following instructions are split into two sections for:\n\n- [Production Mode](#production-mode)\n- [Development Mode](#development-mode)\n\n## Production Mode\n\nPlease download the latest release of fflow for [MacOS](https://github.com/oslabs-beta/fflow/releases) or [Windows](https://github.com/oslabs-beta/fflow/releases).\n\n\u003c!-- [Linux](https://github.com/oslabs-beta/fflow/releases) --\u003e\n\n💫 Linux version coming soon. 💫\n\n- **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.\n\n- **Windows users**: Install the application by running fflow setup 1.0.0.exe.\n\n\u003c!-- - **Linux users**: Run the application as a super user in order to read and write files. --\u003e\n\n#### Clone this repo\n\n1. Clone this repo `git clone https://github.com/oslabs-beta/fflow`\n2. Install the dependencies `npm install`\n3. On a Mac, run `./node_modules/.bin/electron-rebuild` in your terminal or `.\\node_modules\\.bin\\electron-rebuild.cmd` on Windows\n4. Run script for development mode `npm run start`\n5. Build the app (automatic) `npm run package`\n6. Test the app (after `npm run build` || `yarn run build`) `npm run prod`\n\n#### Current issues\n\nNote 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.\n\n#### Running tests\n\nElectron, React and Redux tests can be run using `npm run test`\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Run Exported Project\n\nBelow is the generated directory structure of the React and Webpack application that is created when you export your application.\n\n```\n├── dist                    # Compiled files\n│    └── index.html\n├── src                     # Source files\n│    └── App.js\n│    └── index.js\n│    └── styles.css\n├── webpack.config.js       # Webpack configuration\n├── .babelrc                # Babel configuration\n├── .gitignore              # Git ignore file\n├── package.json            # Dependencies file\n└── README.md               # Boilerplate README file\n\n```\n\n1. Using the inbuilt terminal, `cd` into the Exported Project in your `Downloads` folder\n2. In the root of the Exported Project folder, install dependencies `npm install`\n3. Start an instance `npm run start`\n4. 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\n\n\u003cbr /\u003e\n\n### Add Sass\n\nAdding Sass to your exported project requires updating webpack configs and adding necessary loaders.\n\n1. Install loaders for sass, `sass-loader` and `node-sass`\n2. Add another object to the rules in `webpack.config` with the following:\n\n```javascript\n {\n        test: /\\.scss$/,\n        use: [\n          'style-loader',\n          'css-loader',\n          'sass-loader'\n        ]\n      }\n```\n\n3. Rename `styles.css` to `styles.scss`\n\n### Add Tailwind\n\nAdding Tailwind to your exported project requires updating webpack configs, adding necessary loaders and tailwind config.\n\n1. Install tailwind as a dependency\n\n```\nnpm install tailwindcss\n```\n\n2. Install postcss-loader and autoprefixer as development dependencies\n\n```\nnpm install -D postcss-loader autoprefixer\n```\n\n3. Copy the following copy into `src/styles.css`\n\n```css\n@tailwind base;\n\n@tailwind components;\n\n@tailwind utilities;\n```\n\n4. Create a `postcss.config.js` file and copy the following code in\n\n```javascript\nmodule.exports = {\n  plugins: [require('tailwindcss'), require('autoprefixer')],\n};\n```\n\n5. Add `'postcss-loader'` to the css rules in `webpack.config`\n\n### Change App Title\n\nThis boilerplate names your project `Exported Project`. You can change the app title by inserting the app title within the `\u003ctitle\u003e \u003c/title\u003e` tags in `index.html`.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Contributors\n\n\u003ca href=\"https://github.com/oslabs-beta/fflow/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=oslabs-beta/fflow\" /\u003e\n\u003c/a\u003e\n\n- Rain Hsu [@crumblepie](https://github.com/crumblepie) | [Linkedin](https://www.linkedin.com/in/rainhsu/)\n- Jake Pino [@jakepino](https://github.com/jakepino) | [Linkedin](https://www.linkedin.com/in/jakepino/)\n- Bryanna DeJesus [@BryannaDeJesus](https://github.com/BryannaDeJesus) | [Linkedin](https://www.linkedin.com/in/bryannadejesus/)\n- Ronak Hirpara [@ronakh130](https://github.com/ronakh130) | [Linkedin](https://www.linkedin.com/in/ronak-hirpara/)\n\nProject 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)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Roadmap\n\n- Editable JS Code Preview\n- Nesting HTML elements\n- GitHub OAuth Integration and online project save\n- Keyboard shortcuts for Mac and Windows\n- Export in TypeScript\n- Save Multiple Projects\n- Create Custom HTML Elements\n- Open and compose multiple projects in different windows simultaneously\n- BrowserView to preview project\n- Live Editing with other collaborators\n- AWS hosted version\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Contributing Guide\n\nContributions are what make the open source community an amazing place to learn, inspire, and create. Any contributions are greatly appreciated.\n\nIf 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\".\n\n1. Fork this repo\n2. Create your Feature Branch (`git checkout -b` yourgithubhandle/AmazingFeature)\n3. Commit your Changes (`git commit -m` 'Add some AmazingFeature')\n4. Create and push to your remote branch (`git push origin` yourgithubhandle/AmazingFeature)\n5. Open a Pull Request\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- Read our [contributing guide](https://github.com/oslabs-beta/CONTRIBUTING.md) for more information on how to propose fixes and improvements to fflow. --\u003e\n\n## License\n\nLicensed under MIT License © [fflow](fflow.dev).\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Ffflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Ffflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Ffflow/lists"}