An interactive web application for visualizing the Longest Common Subsequence (LCS) algorithm using Dynamic Programming.
The project helps students understand how the DP table is constructed, how decisions are made during computation, and how the final subsequence is derived through backtracking.
- Dynamic Programming matrix generation in real time
- Step-by-step table filling animation
- Directional indicators (↖ ↑ ←) showing transition choices
- Animated LCS backtracking path visualization
- Final subsequence reconstruction
- Play / Pause execution
- Step Forward navigation
- Adjustable animation speed
- Progress tracking during execution
- Reset and restart functionality
- Pseudocode synchronized with execution
- Visual explanation of DP state transitions
- Educational tooltips for algorithm concepts
- Beginner-friendly interface for understanding Dynamic Programming
- Responsive design
- Dark / Light mode support
- Keyboard-accessible controls
- Color-blind-friendly palette
- Smooth animations powered by Framer Motion
| Technology | Purpose |
|---|---|
| React | Frontend Framework |
| Vite | Build Tool |
| Tailwind CSS | Styling |
| Framer Motion | Animations |
| Lucide React | Icons |
Given two strings:
String 1: ABCBDAB
String 2: BDCABA
The application:
- Builds the Dynamic Programming table.
- Computes LCS lengths for every state.
- Highlights matching characters.
- Shows transitions between states.
- Performs backtracking.
- Displays the final Longest Common Subsequence.
Clone the repository:
git clone https://github.com/ashna-agarwal/LCS_Visualiser-.gitNavigate into the project:
cd LCS_Visualiser-Install dependencies:
npm installRun locally:
npm run devOpen the generated localhost URL in your browser.
This project demonstrates:
- Dynamic Programming
- Algorithm Visualization
- State Transition Analysis
- Frontend Development with React
- Animation Design
- Educational Software Development
- Multiple DP algorithm visualizations
- Complexity analysis panel
- Interactive quiz mode
- Export DP table as image
- Mobile-first optimization
- Algorithm comparison mode
Ashna Agarwal