Skip to content

Commit

Permalink
Merge pull request #2 from gumloop/read-me
Browse files Browse the repository at this point in the history
Read me
  • Loading branch information
max-agenthub authored Nov 29, 2024
2 parents 874a55d + 0922445 commit c9c6a3d
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 36 deletions.
49 changes: 13 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,54 +1,31 @@
![](https://github.com/xyflow/web/blob/main/assets/codesandbox-header-ts.png?raw=true)
![UI Preview](public/images/ui_preview.png)

# React Flow starter (Vite + TS)
# Gumloop Coding Challenge

We've put together this template to serve as a starting point for folks
interested in React Flow. You can use this both as a base for your own React
Flow applications, or for small experiments or bug reports.
👋

**TypeScript not your thing?** We also have a vanilla JavaScript starter template,
just for you!
This is an open-ended challenge. The general goal is to make the flow do something useful when you click the 'Run Flow' button. It's totally up to you how simple or complex you want to make it.

## Getting up and running
Feel free to set things up however you want. Honestly feel free to not even use this repo and start from scratch if you'd like.

You can get this template without forking/cloning the repo using `degit`:
Also check out [react flow here](https://reactflow.dev/), it's an awesome project.

```bash
npx degit xyflow/vite-react-flow-template your-app-name
```
## Getting Started

1. Clone this repository

The template contains mostly the minimum dependencies to get up and running, but
also includes eslint and some additional rules to help you write React code that
is less likely to run into issues:
2. Install dependencies:

```bash
npm install # or `pnpm install` or `yarn install`
```

Vite is a great development server and build tool that we recommend our users to
use. You can start a development server with:
3. Start the development server:

```bash
npm run dev
```

While the development server is running, changes you make to the code will be
automatically reflected in the browser!

## Things to try:

- Create a new custom node inside `src/nodes/` (don't forget to export it from `src/nodes/index.ts`).
- Change how things look by [overriding some of the built-in classes](https://reactflow.dev/learn/customization/theming#overriding-built-in-classes).
- Add a layouting library to [position your nodes automatically](https://reactflow.dev/learn/layouting/layouting)

## Resources

Links:

- [React Flow - Docs](https://reactflow.dev)
- [React Flow - Discord](https://discord.com/invite/Bqt6xrs)

Learn:
## Submission

- [React Flow – Custom Nodes](https://reactflow.dev/learn/customization/custom-nodes)
- [React Flow – Layouting](https://reactflow.dev/learn/layouting/layouting)
Include a link to your repo in your submission or give https://github.com/rbehal access. Email us at [email protected] if you have any issues.
Binary file added public/images/ui_preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c9c6a3d

Please sign in to comment.