https://github.com/ritikrk96/react-flow-task
Interactive drag-and-drop board built with React Flow. Allows only valid Block A → Block B connections, custom context menu, and live preview.
https://github.com/ritikrk96/react-flow-task
drag-and-drop flow-editor frontend-task interaction-board react reactflow tailwind
Last synced: 5 months ago
JSON representation
Interactive drag-and-drop board built with React Flow. Allows only valid Block A → Block B connections, custom context menu, and live preview.
- Host: GitHub
- URL: https://github.com/ritikrk96/react-flow-task
- Owner: RitikRK96
- Created: 2025-06-25T14:13:54.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-25T14:59:56.000Z (8 months ago)
- Last Synced: 2025-08-30T15:04:29.004Z (5 months ago)
- Topics: drag-and-drop, flow-editor, frontend-task, interaction-board, react, reactflow, tailwind
- Language: JavaScript
- Homepage: https://ritik.lancway.com/
- Size: 227 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 React Flow Interaction Board
This project is a task-based implementation demonstrating the use of **React**, **React Flow**, **Tailwind CSS**, and **Vite** to build a clean and responsive drag-and-drop interaction board.
> ✅ **Live Demo:** [https://ritik.lancway.com](https://ritik.lancway.com)
---
## 📋 Task Objectives
I was assigned a frontend developer task to build an interactive UI that fulfills the following:
- 📦 Show a draggable panel with `Block A` and `Block B`.
- 🧲 Allow dragging blocks into a central React Flow canvas.
- 🔗 Only allow valid connections: `Block A → Block B`.
- 🚫 Prevent invalid connections like `Block B → Block A`.
- 🖱️ Show a custom context menu with “Hello World” on right-click.
---
## 🎯 Additional Features Implemented
- 🎨 Tailwind-styled blocks with color coding:
- Blue → Block A
- Green → Block B
- 🔌 Animated connections (visually enhance data flow)
- 🗺️ MiniMap, Zoom Controls, and Background Grid
- 🌐 Deployed on Hostinger: [https://ritik.lancway.com](https://ritik.lancway.com)
---
## 📁 Project Structure
```
src/
├── components/
│ ├── FlowCanvas.jsx // Main board & logic
│ ├── BlockPanel.jsx // Right-side draggable block list
│ └── ContextMenu.jsx // Right-click menu
├── constants/
│ └── blocks.js // JSON-style static block config
├── utils/
│ └── connectionRules.js // Connection validation logic
├── App.jsx
├── main.jsx
└── index.css
````
---
## 🧪 Installation Steps
```bash
# Clone the repository
git clone https://github.com/RitikRK96/react-flow-task.git
cd react-flow-task
# Install dependencies
npm install
# Run the development server
npm run dev
````
---
## 🖥️ How to Run the App
After running the app with `npm run dev`, visit:
📍 [http://localhost:5173](http://localhost:5173)
You can now drag Block A/B from the right panel into the canvas and connect A → B.
---
## 🧠 Summary of the Solution
The solution leverages React Flow for building node-based interactions and constraints. It includes a right-click custom context menu, strict connection validation (A → B only), and clean layout using TailwindCSS.
The board is responsive, includes animated edges, a MiniMap, and styled block nodes.
---
## 🧱 Notes on Design Decisions
* **React Flow** was used for its powerful node editor and custom connection handling.
* **TailwindCSS** allowed for fast prototyping and clean, utility-first styles.
* Separation of concerns was maintained by using:
* `components/` for UI logic
* `constants/` for static config
* `utils/` for business rules like connection validation
---
## 🖼️ Project Outcome
### 1️⃣ Valid Connection (Block A → Block B)
---
### 2️⃣ Invalid Connection (Block B → Block A)
---
### 3️⃣ Right-click Context Menu
---