Interactive Stack Queue Visualizer

An interactive TypeScript React application for visualizing and manipulating stack and queue data structures. This app provides a comprehensive visual interface for testing stack and queue operations including push/pop, enqueue/dequeue, and real-time visualization of data structure behavior with smooth animations.

Features

Visual Data Structure Representation

• Real-time Visualization: See stack and queue operations happen in real-time with smooth animations
• Animated Transitions: Items appear and disappear with framer-motion animations
• Visual Feedback: Clear indication of stack top/bottom and queue front/rear positions
• Empty State Handling: Visual feedback when data structures are empty
• Size Tracking: Real-time display of current size and empty status

Stack Operations

• Push: Add items to the top of the stack with visual stacking effect
• Pop: Remove items from the top of the stack with smooth removal animation
• Peek: View the top item without removing it (displayed in status)
• LIFO Behavior: Last In, First Out - newest items are processed first
• Vertical Visualization: Items stack vertically with newest on top

Queue Operations

• Enqueue: Add items to the rear of the queue with horizontal layout
• Dequeue: Remove items from the front of the queue with smooth removal
• FIFO Behavior: First In, First Out - oldest items are processed first
• Horizontal Visualization: Items line up horizontally with oldest on left

Interactive Features

• Custom Input: Enter custom text for items or use auto-numbered items
• Keyboard Support: Press Enter to add items to both structures
• Button States: Disabled buttons when operations aren't available
• Responsive Design: Works on desktop and mobile devices
• Modern UI: Clean, intuitive interface with Tailwind CSS styling

Technical Details

• Frontend: React 19 with TypeScript
• Styling: Tailwind CSS for modern, responsive UI
• Animations: Framer Motion for smooth, professional animations
• Build Tool: Vite for fast development and optimized builds
• Testing: Comprehensive Vitest test suite for stack and queue operations
• Development: Docker containerized development environment
• Code Quality: ESLint and Prettier for consistent code formatting

Development

Running the Development Server

Using Docker:

./build_docker.sh interactive_stack_queue_visualizer_app
docker run --network=host -v .:/app -it interactive_stack_queue_visualizer_app npm exec vite dev --host

Using npm directly:

npm install
npm run dev

Running Tests

Using Docker:

./build_docker.sh interactive_stack_queue_visualizer_app
docker run -t interactive_stack_queue_visualizer_app ./run_tests.sh

Using npm directly:

npm install
npm test

Running Specific Tests

Using Docker:

./build_docker.sh interactive_stack_queue_visualizer_app
docker run -t interactive_stack_queue_visualizer_app ./run_tests.sh basic

Using npm directly:

npm install
npm test -- --testNamePattern="basic"

Code Quality

npm run lint          # Check for linting issues
npm run lint:fix      # Fix linting issues automatically
npm run format        # Format code with Prettier

How It Works

Key Features:

• TypeScript Classes: Clean, type-safe implementations of Stack and Queue
• React Hooks: State management for real-time UI updates
• Animation System: Smooth transitions for all data structure operations
• Responsive Layout: Grid-based layout that adapts to screen size
• Error Handling: Graceful handling of empty data structure operations

Data Structure Behavior:

• Stack (LIFO): Items are added and removed from the same end (top)

  • Push: Adds item to top, visible immediately
  • Pop: Removes top item, next item becomes visible
  • Visual: Items stack vertically like plates

• Queue (FIFO): Items are added at one end (rear) and removed from the other (front)

  • Enqueue: Adds item to rear, joins the line
  • Dequeue: Removes item from front, next in line moves up
  • Visual: Items line up horizontally like people in a queue

Testing Coverage:

The app includes comprehensive tests covering:

• Basic operations (push/pop, enqueue/dequeue)
• Edge cases (empty structures, single items)
• Size tracking and empty state detection
• Peek functionality for stacks
• Order verification (LIFO/FIFO behavior)
• Type safety with TypeScript generics