Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cestef/flow
Real-time collaborative flowchart editor
https://github.com/cestef/flow
editor nextjs trpc websocket
Last synced: 20 days ago
JSON representation
Real-time collaborative flowchart editor
- Host: GitHub
- URL: https://github.com/cestef/flow
- Owner: cestef
- Created: 2023-08-16T12:26:44.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-05T14:47:12.000Z (10 months ago)
- Last Synced: 2024-10-04T18:53:19.551Z (about 1 month ago)
- Topics: editor, nextjs, trpc, websocket
- Language: TypeScript
- Homepage: https://flow.cstef.dev
- Size: 6.73 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Flow
> **Warning**
> This project is still in heavy development and is not ready for production use, expect data loss and breaking changes
> **Note**
> This is a complete rewrite using [pluv.io](https://pluv.io) as the backend. The old version can be found [here](https://github.com/cestef/flow/tree/legacy)
**Collaborate with your teammates and get started on projects right away, in real-time.**
Flow is a web application that allows you to create, edit and share flowcharts. It is completely free and open-source.
You can use it to create flowcharts for your projects, plan your next vacation or even to create a mind map.
**Live demo**: [flow.cstef.dev](https://flow.cstef.dev)
## Running Locally
### Prerequisites
- [Node.js](https://nodejs.org/en/) (v18.0.0 or higher)
- [pnpm](https://pnpm.io/) (v8.0.0 or higher)
### Installing and Running
1. Clone the repository
```bash
git clone https://github.com/cestef/flow.git
cd flow
```
2. Install dependencies
```bash
pnpm install
```
3. Register a new OAuth app on [GitHub](https://github.com/settings/applications/new) and set the callback URL to `http://localhost:3000/api/auth/callback/github`
4. Register a new OAuth app on [Discord](https://discord.com/developers/applications) and set the callback URL to `http://localhost:3000/api/auth/callback/discord`
5. Create a `.env` file based on the [`.env.example`](.env.example) in the root directory or copy the following:
```bash
# Github
GITHUB_ID="github-id"
GITHUB_SECRET="github-secret"
# Discord
DISCORD_CLIENT_ID="discord-client-id"
DISCORD_CLIENT_SECRET="discord-client-secret"
# next-auth
NEXTAUTH_URL="http://localhost:3000/api/auth"
NEXTAUTH_SECRET="smash-the-keyboard-here"
# Pluv
PLUV_SECRET="smash-the-keyboard-again-here"
PLUV_WS_URL="ws://localhost:3001/api/pluv"
PLUV_AUTH_URL="http://localhost:3000/api/pluv/authorize" # The URL that the frontend requests
PLUV_INTERNAL_AUTH_URL="http://localhost:3001/api/pluv/authorize" # The URL that the backend requests when the request is proxied via NextJS's API
# Misc
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/flow"
APP_URL="http://localhost:3000"
# Optional - only needed for Umami analytics
UMAMI_WEBSITE_ID="get-this-from-umami"
```
6. Start the development server
```bash
pnpm dev
```
You can now access the app at [localhost:3000](http://localhost:3000)
## Production
### Prerequisites
- [Docker](https://www.docker.com/)
### Installing and Running
You can use the provided [`docker-compose.yml`](docker-compose.yml) file to run the app in production mode. It will automatically start a PostgreSQL database, a Next.js server and a WebSocket server.
An image is automatically built and pushed to the [GitHub Container Registry](https://ghcr.io/cestef/flow) on every version tag.
Follow [Running Locally](#running-locally) steps **1**, **3**, **4** and **5** to set up the OAuth apps and `.env` file.
and run the following command to start the app
```bash
docker-compose up
```
> **Note**
> You can also start the app in detached mode with `-d`
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## Support
If you need help with anything related to the project, feel free to join the [Discord server](https://discord.gg/CYQwAW2Yuq) and ask in the [`#support`](https://discord.com/channels/1141658461403357184/1142511788307525732) channel.
[](https://discord.gg/CYQwAW2Yuq)
## License
This project is licensed under the [MIT License](https://choosealicense.com/licenses/mit/).
## Acknowledgements
- [`Next.js`](https://nextjs.org/) - [React](https://reactjs.org/) framework
- [`tRPC`](https://trpc.io/) - End-to-end typesafe API client and server
- [`Prisma`](https://prisma.dev) - Database ORM
- [`next-auth`](https://next-auth.js.org/) - Authentication
- [`react-flow`](https://reactflow.dev/) - React component for building node-based editors