Welcome to my solution for EPhone's Recruitment Challenge! This project demonstrates my skills in building a React application using TypeScript and ReactFlow. In this challenge, I focused on implementing menu extraction and visualization functionalities as per the provided requirements.
This project aims to extract menu items from text input and visualize them using ReactFlow. The extracted menu items are displayed in a structured format, and users can interact with them on the ReactFlow canvas.
Menu Extraction: Implemented regular expression-based extraction of menu items formatted as
"<number>. <Menu Text>"
ReactFlow Integration: Enabled node addition, deletion, duplication, and edge connections on the ReactFlow canvas.
- Paste Text: Enter text containing potential menu structures into the text area on the left panel.
- Extract Menu Items: Click the "Extract" button to trigger the extraction process.
- Visualize Menu Items: View the extracted menu items displayed in a structured format on the left panel.
- Interact with Nodes: Use the ReactFlow canvas on the center panel to interact with nodes, add/update/delete/duplicate nodes, and connect them with directional edges.
Duplicate Hover over the node and click on copy icon Update Double click on any node's label to edit Delete Hover over the node and click on trashcan icon