Skip to content

Commit f8526fb

Browse files
ronakh130ronakh130
authored
Merge pull request #21 from oslabs-beta/rain/alpha-release
Rain/alpha release
2 parents a1ff39c + 27dbbc1 commit f8526fb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+30824
-17276
lines changed

‎.editorconfig

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# editorconfig.org
2+
3+
root = true
4+
5+
[*]
6+
charset = utf-8
7+
end_of_line = crlf
8+
indent_size = 2
9+
indent_style = space
10+
insert_final_newline = true
11+
trim_trailing_whitespace = true
12+
13+
[*.md]
14+
trim_trailing_whitespace = false

‎.gitignore

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,41 @@
1-
# dependencies
2-
/node_modules
3-
node_modules
4-
/.pnp
5-
.pnp.js
6-
7-
# production
8-
/build
9-
build
10-
dist
11-
**dist/
12-
13-
ignore_react.tsx
14-
_ignoreelectron.js
15-
16-
npm-debug.log
1+
# Build folder and files #
2+
builds/
3+
4+
# Development folders and files #
5+
.tmp/
6+
dist/
7+
node_modules/
8+
*.compiled.*
9+
10+
# Folder config file #
11+
Desktop.ini
12+
13+
# Log files & folders #
14+
logs/
15+
*.log
16+
npm-debug.log*
17+
.npm
18+
19+
# New Features under Development #
20+
**Login
21+
22+
23+
# Packages #
24+
# it's better to unpack these files and commit the raw source
25+
# git has its own built in compression methods
26+
*.7z
27+
*.dmg
28+
*.gz
29+
*.iso
30+
*.jar
31+
*.rar
32+
*.tar
33+
*.zip
34+
35+
# Windows & Mac file caches #
1736
.DS_Store
37+
Thumbs.db
38+
ehthumbs.db
39+
40+
# Windows shortcuts #
41+
*.lnk

‎.npmignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
_ignore/
2+
docs/
3+
builds/
4+
dist/
5+
.editorconfig

‎LICENSE

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
MIT License
2+
3+
Copyright (c) fflow.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<br />
2+
<div align="center">
3+
<a href="https://github.com/oslabs-beta/fflow">
4+
<img src="images/logo.png" alt="Logo" width="80" height="80">
5+
</a>
6+
7+
<h3 align="center">fflow</h3>
8+
9+
<p align="center">
10+
<strong>Supercharge your React development process</strong>
11+
<br />
12+
<a href="https://github.com/oslabs-beta/fflow"><strong>Explore the docs »</strong></a>
13+
<br />
14+
<br />
15+
<a href="https://github.com/oslabs-beta/fflow">View Demo</a>
16+
·
17+
<a href="https://github.com/oslabs-beta/fflow/issues">Report Bug</a>
18+
·
19+
<a href="https://github.com/oslabs-beta/fflow/issues">Request Feature</a>
20+
</p>
21+
</div>
22+
23+
<p align="center">
24+
<img alt="GitHub contributors" src="https://img.shields.io/github/contributors/oslabs-beta/fflow">
25+
<img alt="GitHub license" src="https://img.shields.io/github/license/oslabs-beta/fflow?color=blue">
26+
<img alt="GitHub issues" src="https://img.shields.io/github/issues/oslabs-beta/fflow?color=yellow">
27+
<img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/oslabs-beta/fflow?color=blueviolet">
28+
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/oslabs-beta/fflow?style=social">
29+
<br />
30+
<br />
31+
Give a ⭐️ if our project helped or interests you!
32+
</p>
33+
34+
<br />
35+
36+
<details open>
37+
<summary>Table of Contents</summary>
38+
<ol>
39+
<li>
40+
<a href="#about">About fflow</a>
41+
<ul>
42+
<li><a href="#features">Features</a></li>
43+
<li><a href="#built-with">Built With</a></li>
44+
</ul>
45+
</li>
46+
<li>
47+
<a href="#getting-started">Getting Started</a>
48+
<ul>
49+
<li><a href="#production-mode">Production Mode</a></li>
50+
<li><a href="#development-mode">Development Mode</a></li>
51+
</ul>
52+
</li>
53+
<li><a href="#run-exported-project">Run Exported Project</a></li>
54+
<li><a href="#contributors">Contributors</a></li>
55+
<li><a href="#roadmap">Roadmap</a></li>
56+
<li><a href="#contributing-guide">Contributing Guide</a></li>
57+
<li><a href="#license">License</a></li>
58+
</ol>
59+
</details>
60+
61+
## About fflow
62+
63+
Ever feel like getting started with a React App takes too many files and too much boilerplate code?
64+
65+
Meet fflow.
66+
67+
fflow is a frontend developer tool to create React applications in no time 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.
68+
69+
We are really excited to launch our alpha version and hope you will download, play around with it, and provide us feedback.
70+
71+
Visit our website here 👉 https://fflow.dev
72+
73+
GIFS to be inserted here and centered aligned
74+
75+
### Features
76+
77+
- Drag, Drop, Reorder and Delete HTML Tags
78+
- Create Custom React Components
79+
- Light and Dark Theme based on OS Preferences and Manual Toggle
80+
- Delete Project and Clear Canvas to restart build process
81+
- Live preview in Code editor
82+
- Interactable CSS Code Editor
83+
- Easily switch between files with file tree or on the canvas
84+
- Easy redirect to App.jsx by clicking on the fflow icon
85+
- Export app with preconfigured and versatile webpack
86+
- In-built terminal initializes an instance of the exported app without leaving fflow
87+
- Accessibility features including canvas item highlighting when the HTML tag or Component is picked up
88+
89+
### Built with
90+
91+
- [React.js](https://reactjs.org/)
92+
- [Electron](https://www.electronjs.org/)
93+
- [React-Monaco/Editor](https://github.com/react-monaco-editor/react-monaco-editor)
94+
- [Webpack 5](https://webpack.js.org)
95+
- [TailwindUI](https://tailwindui.com)
96+
- [React–Redux](https://react-redux.js.org)
97+
- [Redux Toolkit](https://redux-toolkit.js.org)
98+
- [React Beautiful DnD](https://github.com/atlassian/react-beautiful-dnd)
99+
- [React Icons](https://react-icons.github.io/react-icons/)
100+
- [Xterm.js](https://xtermjs.org/)
101+
- [node-pty](https://www.npmjs.com/package/node-pty)
102+
- [Jest](https://jestjs.io)
103+
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
104+
- [Playwright](https://playwright.dev/docs/api/class-electronapplication)
105+
<p align="right">(<a href="#top">back to top</a>)</p>
106+
107+
## Getting Started
108+
109+
The following instructions are split into two sections for:
110+
111+
- [Production Mode](#production-mode)
112+
- [Development Mode](#development-mode)
113+
114+
## Production Mode
115+
116+
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).
117+
118+
<!-- [Linux](https://github.com/oslabs-beta/fflow/releases) -->
119+
120+
💫 Linux version coming soon. 💫
121+
122+
- **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.
123+
124+
- **Windows users**: Install the application by running fflow setup 1.0.0.exe.
125+
126+
<!-- - **Linux users**: Run the application as a super user in order to read and write files. -->
127+
128+
<!-- #### Drag, Drop, Reorder and Delete HTML Tags onto Canvas
129+
130+
#### Nest HTML Tags and Components within custom React Components
131+
132+
#### Style your project
133+
134+
Add styles to your HTML elements and React Components by editing directly in the CSS Editor. This will then be exported with your app.
135+
136+
#### Clearing the Canvas
137+
138+
## Development Mode -->
139+
140+
#### Clone this repo
141+
142+
1. Clone this repo `git clone https://github.com/oslabs-beta/fflow`
143+
2. Install the dependencies `npm install`
144+
3. Run script for development mode `npm run start`
145+
4. Build the app (automatic) `npm run build`
146+
5. Test the app (after `npm run build` || `yarn run build`) `npm run prod`
147+
148+
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.
149+
150+
#### Node versioning error
151+
152+
#### Running tests
153+
154+
Electron, React and Redux tests can be run using `npm run test`
155+
156+
<p align="right">(<a href="#top">back to top</a>)</p>
157+
158+
## Run Exported Project
159+
160+
Below is the generated directory structure of the React and Webpack application that is created when you export your application.
161+
162+
```
163+
├── dist # Compiled files
164+
│ └── index.html
165+
├── src # Source files
166+
│ └── App.js
167+
│ └── index.js
168+
│ └── styles.css
169+
├── webpack.config.js # Webpack configuration
170+
├── .babelrc # Babel configuration
171+
├── .gitignore # Git ignore file
172+
├── package.json # Dependencies file
173+
└── README.md # Boilerplate README file
174+
175+
```
176+
177+
1. Using the inbuilt terminal, `cd` into the Exported Project in your `Downloads` folder
178+
2. In the root of the Exported Project folder, install dependencies `npm install`
179+
3. Start an instance `npm run start`
180+
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
181+
182+
<br />
183+
184+
### Add Sass
185+
186+
Adding Sass to your exported project requires updating webpack configs and adding necessary loaders.
187+
188+
1. Install loaders for sass, `sass-loader` and `node-sass`
189+
2. Add another object to the rules in `webpack.config` with the following:
190+
191+
```javascript
192+
{
193+
test: /\.scss$/,
194+
use: [
195+
'style-loader',
196+
'css-loader',
197+
'sass-loader'
198+
]
199+
}
200+
```
201+
202+
3. Rename `styles.css` to `styles.scss`
203+
204+
### Add Tailwind
205+
206+
Adding Tailwind to your exported project requires updating webpack configs, adding necessary loaders and tailwind config.
207+
208+
1. Install tailwind as a dependency
209+
210+
```
211+
npm install tailwindcss
212+
```
213+
214+
2. Install postcss-loader and autoprefixer as development dependencies
215+
216+
```
217+
npm install -D postcss-loader autoprefixer
218+
```
219+
220+
3. Copy the following copy into `src/styles.css`
221+
222+
```css
223+
@tailwind base;
224+
225+
@tailwind components;
226+
227+
@tailwind utilities;
228+
```
229+
230+
4. Create a `postcss.config.js` file and copy the following code in
231+
232+
```javascript
233+
module.exports = {
234+
plugins: [require('tailwindcss'), require('autoprefixer')],
235+
};
236+
```
237+
238+
5. Add `'postcss-loader'` to the css rules in `webpack.config`
239+
240+
### Change App Title
241+
242+
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`.
243+
244+
<p align="right">(<a href="#top">back to top</a>)</p>
245+
246+
## Contributors
247+
248+
- Rain Hsu [@crumblepie](https://github.com/crumblepie) | [Linkedin](https://www.linkedin.com/in/rainhsu/)
249+
- Jake Pino [@jakepino](https://github.com/jakepino) | [Linkedin](https://www.linkedin.com/in/jakepino/)
250+
- Bryanna DeJesus [@BryannaDeJesus](https://github.com/BryannaDeJesus) | [Linkedin](https://www.linkedin.com/in/bryannadejesus/)
251+
- Ronak Hirpara [@ronakh130](https://github.com/ronakh130) | [Linkedin](https://www.linkedin.com/in/ronak-hirpara/)
252+
253+
Project Links: [Github](https://github.com/oslabs-beta/fflow) | [Linkedin](https://www.linkedin.com/company/fflowdev) | [Press]
254+
255+
<p align="right">(<a href="#top">back to top</a>)</p>
256+
257+
## Roadmap
258+
259+
- Editable JS Code Preview
260+
- GitHub OAuth Integration and online project save
261+
- Keyboard shortcuts for Mac and Windows
262+
- Export in TypeScript
263+
- Save Multiple Projects
264+
- Create Custom HTML Elements
265+
- Open and compose multiple projects in different windows simultaneously
266+
- BrowserView to preview project
267+
- Live Editing with other collaborators
268+
- AWS hosted version
269+
270+
<p align="right">(<a href="#top">back to top</a>)</p>
271+
272+
## Contributing Guide
273+
274+
Contributions are what make the open source community an amazing place to learn, inspire, and create. Any contributions are greatly appreciated.
275+
276+
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".
277+
278+
1. Fork this repo
279+
2. Create your Feature Branch (`git checkout -b` yourgithubhandle/AmazingFeature)
280+
3. Commit your Changes (`git commit -m` 'Add some AmazingFeature')
281+
4. Create and push to your remote branch (`git push origin` yourgithubhandle/AmazingFeature)
282+
5. Open a Pull Request
283+
284+
<p align="right">(<a href="#top">back to top</a>)</p>
285+
286+
<!-- Read our [contributing guide](https://github.com/oslabs-beta/CONTRIBUTING.md) for more information on how to propose fixes and improvements to fflow. -->
287+
288+
## License
289+
290+
Licensed under MIT License © [fflow](fflow.dev).

0 commit comments

Comments
 (0)