Skip to content

Sukkoth/ReactFlowMenuExtraction

Repository files navigation

ReactFlow Menu Extraction and Visualization 🔖

Introduction

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.

Project Overview

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.

Features

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.

Usage

  • 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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published