VisualX

November 9, 2025 · View on GitHub

An interactive platform to visualize algorithms step-by-step. Built with Next.js, this project helps developers understand data structures and algorithms through smooth, real-time animations and detailed performance metrics.

Getting Started

  1. Install dependencies: npm install
  2. Run the development server: npm run dev
  3. Open http://localhost:9002 to start exploring algorithms

Features

  • Interactive Visualizations: Watch algorithms in action with smooth animations
  • Custom Data Input: Test algorithms with your own datasets
  • Performance Metrics: Real-time analysis of time/space complexity and operation counts
  • Multiple Algorithm Categories: Sorting, searching, and graph algorithms

Project Structure

VisualX/
├── 📁 src/                           # Source code
│   ├── 📁 ai/                        # AI & GenKit Integration
│   │   ├── dev.ts                    # Development GenKit server
│   │   └── genkit.ts                 # GenKit configuration
│   │
│   ├── 📁 app/                       # Next.js App Router
│   │   ├── globals.css               # Global styles
│   │   ├── layout.tsx                # Root layout component
│   │   ├── page.tsx                  # Homepage
│   │   └── 📁 algorithms/            # Algorithm pages
│   │       ├── 📁 graph/             # Graph algorithms
│   │       │   └── page.tsx
│   │       ├── 📁 searching/         # Search algorithms
│   │       │   └── page.tsx
│   │       └── 📁 sorting/           # Sorting algorithms
│   │           └── page.tsx
│   │
│   ├── 📁 components/                # React Components
│   │   ├── logo.tsx                  # VisualX logo component
│   │   ├── 📁 layout/                # Layout components
│   │   │   └── sidebar-content.tsx   # Sidebar navigation
│   │   ├── 📁 ui/                    # Reusable UI components (Radix + Tailwind)
│   │   │   ├── accordion.tsx         # Accordion component
│   │   │   ├── alert-dialog.tsx      # Alert dialog
│   │   │   ├── alert.tsx             # Alert notifications
│   │   │   ├── avatar.tsx            # Avatar component
│   │   │   ├── badge.tsx             # Badge/label component
│   │   │   ├── button.tsx            # Button component
│   │   │   ├── calendar.tsx          # Calendar picker
│   │   │   ├── card.tsx              # Card container
│   │   │   ├── carousel.tsx          # Image carousel
│   │   │   ├── chart.tsx             # Chart/graph component
│   │   │   ├── checkbox.tsx          # Checkbox input
│   │   │   ├── collapsible.tsx       # Collapsible sections
│   │   │   ├── dialog.tsx            # Modal dialogs
│   │   │   ├── dropdown-menu.tsx     # Dropdown menus
│   │   │   ├── form.tsx              # Form components
│   │   │   ├── input.tsx             # Text input
│   │   │   ├── label.tsx             # Form labels
│   │   │   ├── menubar.tsx           # Menu bar
│   │   │   ├── popover.tsx           # Popover component
│   │   │   ├── progress.tsx          # Progress bar
│   │   │   ├── radio-group.tsx       # Radio button group
│   │   │   ├── scroll-area.tsx       # Scrollable area
│   │   │   ├── select.tsx            # Select dropdown
│   │   │   ├── separator.tsx         # Visual separator
│   │   │   ├── sheet.tsx             # Slide-out sheet
│   │   │   ├── sidebar.tsx           # Sidebar component
│   │   │   ├── skeleton.tsx          # Loading skeleton
│   │   │   ├── slider.tsx            # Range slider
│   │   │   ├── switch.tsx            # Toggle switch
│   │   │   ├── table.tsx             # Data table
│   │   │   ├── tabs.tsx              # Tab navigation
│   │   │   ├── textarea.tsx          # Multi-line input
│   │   │   ├── toast.tsx             # Toast notifications
│   │   │   ├── toaster.tsx           # Toast container
│   │   │   └── tooltip.tsx           # Hover tooltips
│   │   └── 📁 visualizer/            # Algorithm visualization components
│   │       ├── code-panel.tsx        # Code display panel
│   │       ├── color-legend.tsx      # Color coding legend
│   │       ├── controls.tsx          # Playback controls
│   │       ├── data-form.tsx         # Data input form
│   │       ├── graph-canvas.tsx      # Graph visualization canvas
│   │       ├── graph-visualizer.tsx  # Graph algorithm visualizer
│   │       ├── metrics-panel.tsx     # Performance metrics display
│   │       ├── search-canvas.tsx     # Search visualization canvas
│   │       ├── searching-visualizer.tsx # Search algorithm visualizer
│   │       ├── sorting-visualizer.tsx   # Sorting algorithm visualizer
│   │       └── visualization-canvas.tsx # General visualization canvas
│   │
│   ├── 📁 hooks/                     # Custom React hooks
│   │   ├── use-mobile.tsx            # Mobile detection hook
│   │   └── use-toast.ts              # Toast notification hook
│   │
│   └── 📁 lib/                       # Utility libraries
│       ├── placeholder-images.json   # Placeholder image data
│       ├── placeholder-images.ts     # Image utilities
│       ├── utils.ts                  # General utilities
│       └── 📁 algorithms/            # Algorithm implementations
│           ├── graph.ts              # Graph algorithms (BFS, DFS, Dijkstra)
│           ├── graph_backup.ts       # Backup graph algorithms
│           ├── searching.ts          # Search algorithms (Binary, Linear)
│           ├── sorting.ts            # Sorting algorithms (Bubble, Quick, Merge, etc.)
           └── types.ts              # Algorithm type definitions
│

├── 📁 .github/                       # GitHub configuration
├── 📁 .next/                         # Next.js build output
├── 📁 .nyc_output/                   # Coverage output
├── 📁 .scannerwork/                  # SonarQube analysis
├── 📁 coverage/                      # Test coverage reports
├── 📁 metrics-report/                # Code metrics
├── 📁 node_modules/                  # Dependencies
├── 📁 plato-report/                  # Code complexity reports
├── 📁 playwright-report/             # Playwright test reports
├── 📁 test-results/                  # Test execution results
│
├── 📄 .gitignore                     # Git ignore rules
├── 📄 components.json                # UI component configuration
├── 📄 next-env.d.ts                  # Next.js TypeScript declarations
├── 📄 next.config.ts                 # Next.js configuration
├── 📄 package.json                   # Project dependencies & scripts
├── 📄 package-lock.json              # Dependency lock file
├── 📄 postcss.config.mjs             # PostCSS configuration
├── 📄 README.md                      # Project documentation
├── 📄 sonar-project.properties       # SonarQube configuration
├── 📄 SONARQUBE_ZERO_ERROR_STRATEGY.md # SonarQube guidelines
├── 📄 tailwind.config.ts             # Tailwind CSS configuration
├── 📄 tsconfig.json                  # TypeScript configuration
└── 📄 tsconfig.tsbuildinfo           # TypeScript build cache

Development

Scripts

  • Development: npm run dev - Start development server on port 9002
  • Build: npm run build - Build production application
  • Type Check: npm run typecheck - Run TypeScript type checking
  • Lint: npm run lint - Run ESLint code analysis
  • GenKit Development: npm run genkit:dev - Start GenKit AI development server
  • GenKit Watch: npm run genkit:watch - Start GenKit with auto-reload

Testing

  • Run Tests: npm test - Execute Playwright E2E tests
  • Headed Tests: npm run test:headed - Run tests with browser UI
  • Debug Tests: npm run test:debug - Debug tests interactively

Key Files

  • Entry Point: src/app/page.tsx - Application homepage
  • Algorithm Logic: src/lib/algorithms/ - Core algorithm implementations
  • Visualizers: src/components/visualizer/ - Interactive visualization components
  • UI Components: src/components/ui/ - Reusable interface elements

Technology Stack

  • Framework: Next.js 15 with App Router
  • Language: TypeScript
  • Styling: Tailwind CSS + Radix UI primitives
  • Testing: Playwright (E2E), SonarQube (Code Quality)
  • AI Integration: Google GenKit for AI-assisted features
  • Animations: Framer Motion
  • Icons: Lucide React
  • Charts: Recharts for performance visualization

Architecture

Algorithm Implementation Pattern

Each algorithm follows a consistent structure:

const algorithmInfo: AlgorithmInfo = {
  name: "Algorithm Name",
  description: "Clear description",
  complexity: { time: { best: "O(n)", average: "O(n²)", worst: "O(n²)" }, space: "O(1)" },
  pseudocode: ["Step 1", "Step 2", "..."]
};

const generateSteps = (input: InputType): StepType[] => {
  // Algorithm implementation that generates visualization steps
  return steps;
};

Component Hierarchy

  • Page Components → Visualizer Components → Canvas Components → UI Primitives
  • Algorithm Libraries → Step Generation → Visualization Rendering