{"id":29013137,"url":"https://github.com/ritikrk96/react-flow-task","last_synced_at":"2026-05-03T23:31:50.338Z","repository":{"id":301185025,"uuid":"1008420719","full_name":"RitikRK96/react-flow-task","owner":"RitikRK96","description":"Interactive drag-and-drop board built with React Flow. Allows only valid Block A → Block B connections, custom context menu, and live preview.","archived":false,"fork":false,"pushed_at":"2025-06-25T14:59:56.000Z","size":232,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-30T15:04:29.004Z","etag":null,"topics":["drag-and-drop","flow-editor","frontend-task","interaction-board","react","reactflow","tailwind"],"latest_commit_sha":null,"homepage":"https://ritik.lancway.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RitikRK96.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-25T14:13:54.000Z","updated_at":"2025-06-25T14:59:59.000Z","dependencies_parsed_at":"2025-06-25T16:00:01.060Z","dependency_job_id":null,"html_url":"https://github.com/RitikRK96/react-flow-task","commit_stats":null,"previous_names":["ritikrk96/react-flow-task"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RitikRK96/react-flow-task","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RitikRK96%2Freact-flow-task","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RitikRK96%2Freact-flow-task/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RitikRK96%2Freact-flow-task/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RitikRK96%2Freact-flow-task/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RitikRK96","download_url":"https://codeload.github.com/RitikRK96/react-flow-task/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RitikRK96%2Freact-flow-task/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272864641,"owners_count":25006040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","flow-editor","frontend-task","interaction-board","react","reactflow","tailwind"],"created_at":"2025-06-25T19:10:14.063Z","updated_at":"2026-05-03T23:31:50.294Z","avatar_url":"https://github.com/RitikRK96.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 React Flow Interaction Board\n\nThis 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.\n\n\u003e ✅ **Live Demo:** [https://ritik.lancway.com](https://ritik.lancway.com)\n\n---\n\n## 📋 Task Objectives\n\nI was assigned a frontend developer task to build an interactive UI that fulfills the following:\n\n- 📦 Show a draggable panel with `Block A` and `Block B`.\n- 🧲 Allow dragging blocks into a central React Flow canvas.\n- 🔗 Only allow valid connections: `Block A → Block B`.\n- 🚫 Prevent invalid connections like `Block B → Block A`.\n- 🖱️ Show a custom context menu with “Hello World” on right-click.\n\n---\n\n## 🎯 Additional Features Implemented\n\n- 🎨 Tailwind-styled blocks with color coding:\n  - Blue → Block A\n  - Green → Block B\n- 🔌 Animated connections (visually enhance data flow)\n- 🗺️ MiniMap, Zoom Controls, and Background Grid\n- 🌐 Deployed on Hostinger: [https://ritik.lancway.com](https://ritik.lancway.com)\n\n---\n\n## 📁 Project Structure\n\n```\n\nsrc/\n├── components/\n│   ├── FlowCanvas.jsx        // Main board \u0026 logic\n│   ├── BlockPanel.jsx        // Right-side draggable block list\n│   └── ContextMenu.jsx       // Right-click menu\n├── constants/\n│   └── blocks.js             // JSON-style static block config\n├── utils/\n│   └── connectionRules.js    // Connection validation logic\n├── App.jsx\n├── main.jsx\n└── index.css\n\n````\n\n---\n\n## 🧪 Installation Steps\n\n```bash\n# Clone the repository\ngit clone https://github.com/RitikRK96/react-flow-task.git\ncd react-flow-task\n\n# Install dependencies\nnpm install\n\n# Run the development server\nnpm run dev\n````\n\n---\n\n## 🖥️ How to Run the App\n\nAfter running the app with `npm run dev`, visit:\n\n📍 [http://localhost:5173](http://localhost:5173)\n\nYou can now drag Block A/B from the right panel into the canvas and connect A → B.\n\n---\n\n## 🧠 Summary of the Solution\n\nThe 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.\n\nThe board is responsive, includes animated edges, a MiniMap, and styled block nodes.\n\n---\n\n## 🧱 Notes on Design Decisions\n\n* **React Flow** was used for its powerful node editor and custom connection handling.\n* **TailwindCSS** allowed for fast prototyping and clean, utility-first styles.\n* Separation of concerns was maintained by using:\n\n  * `components/` for UI logic\n  * `constants/` for static config\n  * `utils/` for business rules like connection validation\n\n---\n\n## 🖼️ Project Outcome\n\n### 1️⃣ Valid Connection (Block A → Block B)\n\n![Dragging blocks](./src/assets/outcome1.png)\n\n---\n\n### 2️⃣ Invalid Connection (Block B → Block A)\n\n![Invalid connection alert](./src/assets/outcome2.png)\n\n---\n\n### 3️⃣ Right-click Context Menu\n\n![Context menu](./src/assets/outcome3.png)\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritikrk96%2Freact-flow-task","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fritikrk96%2Freact-flow-task","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritikrk96%2Freact-flow-task/lists"}