Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vinod-mane3021/workflow-builder
https://github.com/vinod-mane3021/workflow-builder
Last synced: 20 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/vinod-mane3021/workflow-builder
- Owner: Vinod-Mane3021
- Created: 2024-09-05T06:40:07.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-18T09:39:19.000Z (4 months ago)
- Last Synced: 2024-09-18T12:48:47.573Z (4 months ago)
- Language: TypeScript
- Size: 330 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Workflow Builder
## 📚 Table of Contents
1. 🤖 [Introduction](#-introduction)
1. ✨ [Features](#-features)
2. 🧑💻 [Tech Stack](#-tech-stack)
3. 🔧 [Local Setup](#-local-setup)
7. 📄 [Feedback](#-feedback)
8. 📸 [Screenshots](#-screenshots)## 🤖 Introduction
This project features creating, managing, and visualizing different types of nodes in a React application. It uses Zustand for state management and React Flow for interactive node connections. The project allows users to dynamically add, edit, and delete nodes, with a focus on flexibility and efficiency.
## ✨ Features
- **Dynamic Node Creation**: Add new nodes of various types easily by dragging and dropping
- **Interactive Connections**: Nodes can be connected with interactive edges to another node
- **Customizable Styles**: Nodes and handles can be styled and customized
- **Manage Workflow**: create, read and update workflows## 🧑💻 Tech Stack
- ⚛️ [React](https://reactjs.org/): UI library for building user interfaces.
- ⬜ [Next.js](https://nextjs.org/): React framework for server-side rendering and static site generation.
- 💨 [Tailwind CSS](https://tailwindcss.com/): Utility-first CSS framework for rapid UI development.
- 💎 [Shadcn UI](https://shadcn.dev/): UI components for React with a focus on accessibility.
- TS [TypeScript](https://www.typescriptlang.org/): Superset of JavaScript adding static types.
- 🔥 [ExpressJS](https://honojs.dev/): web framework for building APIs.
- 🛠️ [Zod](https://zod.dev/): Schema validation for TypeScript and JavaScript.
- 🐻 [Zustand](https://zustand-demo.pmnd.rs/): Lightweight state management for React.
- 🟪 [Prisma](https://www.prisma.io/): ORM for TypeScript and Node.js with a focus on type safety.
- 🌐 [Neon Database](https://neon.tech/): Serverless PostgreSQL database.
- 🐘 [PostgreSQL](https://www.postgresql.org/): Open-source relational database system.
- 🎣 [Tanstack React Query](https://react-query.tanstack.com/): Data fetching and synchronization for React.## ⚙️ Local setup
1. Clone this repository:
```bash
$ git clone https://github.com/Vinod-Mane3021/workflow-builder.git
```
2. Backend
```bash
$ cd backend
$ pnpm install
$ pnpm start
```3. Frontend
```bash
$ cd frontend
$ pnpm install
$ pnpm run dev
```## ****📄 Feedback****
I'd be happy to connect with you!
## ****📄 Screenshots****
- ![Workflow Page](./assets/screenshots/Screenshot2.png)
- ![Editor](./assets/screenshots/Screenshot1.png)