Project Architecture

Project Architecture

The project is divided into two main parts:

1. Algorithms
2. Data Structures

Each part has:

• Logic (Algorithms/Data Structure operations)
• Hooks (State + Controller)
• Components (UI)
• Utils (Generators, helpers)
• Global Store (Context API)

Folder Architecture

src/

• algorithms/ → Algorithm logic
• hooks/Algorithms → Algorithm state management
• hooks/DataStructures → Data structure state management
• components/ → Reusable UI components
• pages/ → Pages for each visualization
• utils/ → Generators and helper functions
• store/ → Global state (Context API)

Architecture Flow

User Action → Hook → Algorithm Logic → Update State → UI Re-render → Animation

This separation ensures:

• Clean code
• Reusability
• Easy to add new algorithms
• Easy to add new data structures