So, what is it about?

Implement a Longest Common Subsequence (LCS) Dynamic Programming Visualizer using React + Tailwind CSS that allows users to understand how the DP table is built step-by-step to find the LCS between two strings.

The visualizer should show how the algorithm compares characters, fills the DP table, and reconstructs the final LCS sequence visually and interactively.

🧩 Requirements

1. User Interface

Provide input controls for:

String A (e.g., ABCBDAB)

String B (e.g., BDCAB)

Buttons:

Start Visualization

Reset

Pause / Resume

Show LCS Sequence

DP Table Visualization:

A 2D grid representing the DP table where:

Rows correspond to characters of String A

Columns correspond to characters of String B

Each cell displays the computed LCS length up to that point.

Highlight Colors:

🟦 Active Cell: Currently being computed

🟩 Match: Characters matched (A[i-1] === B[j-1])

🟥 No Match: Taking the max from top or left cell

🟨 Final Path: Cells part of the final LCS reconstruction

2. Algorithm Logic

Implement the DP logic inside:

src/algorithms/dp/longestCommonSubsequence.js

Use a generator or step-based approach that yields intermediate DP table states.

Handle both the table-filling phase and the LCS reconstruction phase.

Each yield should return:

Current DP table snapshot

Active cell position

Match/mismatch info

(Optionally) reconstructed sequence progress

3. Page Setup

Create a new page:

src/pages/dp/LCS.jsx

Create a visualization component:

src/components/dp/LCSVisualizer.jsx

Import the algorithm logic from:

src/algorithms/dp/longestCommonSubsequence.js

The visualizer should:

Render the DP grid dynamically.

Animate each step as cells are computed.

Show explanatory text below the table (e.g.,
"A[i-1] === B[j-1] → dp[i][j] = 1 + dp[i-1][j-1]" or
"No match → dp[i][j] = max(dp[i-1][j], dp[i][j-1])").

4. Routing

Add a new route in App.jsx:

<Route path="/dp/lcs" element={} />

📂 Folder Structure
Algo-Visualizer/
├── src/
│ ├── algorithms/
│ │ ├── dp/
│ │ │ ├── longestCommonSubsequence.js # DP logic for LCS
│ ├── components/
│ │ ├── dp/
│ │ │ ├── LCSVisualizer.jsx
│ ├── pages/
│ │ ├── dp/
│ │ │ ├── LCS.jsx # Main LCS page
│ ├── App.jsx # Add route here

🚀 Expected Outcome

A fully functional LCS DP Visualizer that:

Accepts two custom input strings.

Animates the filling of the DP table cell-by-cell.

Highlights character matches, mismatches, and final LCS reconstruction.

Displays the resulting LCS sequence at the end.

🧠 Tech Stack

React

Tailwind CSS

React Router DOM

(Optional) Framer Motion for animations

🔧 How I Plan to Implement

UI Setup: Create layout and controls in LCS.jsx.

DP Logic: Implement generator-based step function in longestCommonSubsequence.js that yields intermediate states.

Visualizer: Render DP grid and animate updates in LCSVisualizer.jsx.

Reconstruction: Add step-by-step highlighting for the LCS traceback path.

Integration: Connect visualization logic with user controls.

Enhancements: Add animations, explanatory text, and optional speed controls.

Testing: Validate correctness with multiple string pairs and edge cases.

Code of Conduct

• I agree to follow this project's Code of Conduct