Live Preview: https://bitespeed-test-ten.vercel.app/

Steps I took to complete this task:

  1. Used React Flow starter (Vite + TS) kit to get started with react flow.
  2. Played around with react flow for a bit to understand the concepts.
  3. Understood the problem statement and Quickly implemented basic nodes and edges setup.
  4. Used React-Dnd to implement drag and drop functionality.
  5. Took care of all the functionality and improved code extensibility.
  6. UI Overhaul.

TechStack

  • Typescript, React+Vite, Tailwind, React Flow and React Dnd
Screenshot 2024-05-16 at 1 25 27 PM Screenshot 2024-05-16 at 1 42 18 PM