GitHub - SH20RAJ/codevisualiser: CodeVisualizer is an open-source platform where you can see how algorithms work, not just read about them.

# Clone the repo
git clone https://github.com/SH20RAJ/codevisualiser.git
cd codevisualiser

# Install dependencies
bun install

# Start dev server
bun run dev

codevisualiser/
├── src/
│   └── app/
│       ├── page.tsx                   ← Homepage
│       ├── problems/
│       │   ├── page.tsx               ← Problem list + filters
│       │   └── [slug]/page.tsx        ← Problem detail (viz + code)
│       └── tags/[tag]/page.tsx        ← Problems by topic
│
├── components/
│   ├── ui/                            ← CodeBlock, Tabs, Badges, StepController
│   ├── visualizations/                ← One folder per problem
│   │   ├── _base/                     ← Reusable primitives (ArrayViz, TreeViz…)
│   │   ├── two-sum/index.tsx
│   │   └── binary-search/index.tsx
│   └── layouts/
│
├── data/
│   ├── problems/                      ← Typed TS file per problem
│   │   ├── two-sum.ts
│   │   └── binary-search.ts
│   ├── index.ts                       ← Problem registry
│   ├── schema.ts                      ← TypeScript interfaces
│   └── categories.ts
│
├── content/
│   └── problems/                      ← MDX explanation per problem
│       ├── two-sum.mdx
│       └── binary-search.mdx
│
├── next.config.ts
├── open-next.config.ts
└── wrangler.jsonc

import type { Problem } from '../schema'

const problem: Problem = {
  id: 1,
  slug: 'two-sum',
  title: 'Two Sum',
  difficulty: 'Easy',
  tags: ['Array', 'Hash Table'],
  leetcodeUrl: 'https://leetcode.com/problems/two-sum/',
  approaches: [
    {
      name: 'Brute Force',
      timeComplexity: 'O(n²)',
      spaceComplexity: 'O(1)',
      intuition: 'Check every pair of numbers until you find ones that sum to target.',
      codes: [
        {
          language: 'python',
          code: `def twoSum(nums, target):
    for i in range(len(nums)):
        for j in range(i + 1, len(nums)):
            if nums[i] + nums[j] == target:
                return [i, j]`,
        },
        // add more languages...
      ],
    },
    {
      name: 'Hash Map',
      timeComplexity: 'O(n)',
      spaceComplexity: 'O(n)',
      intuition: 'Store each number\'s index in a map; for each number check if its complement already exists.',
      codes: [ /* ... */ ],
    },
  ],
  visualizationComponent: 'TwoSumViz',
  hasVisualization: true,
}

export default problem

import { ArrayViz, HashMapViz } from '../_base'
import { useVizStepper } from '@/lib/useVizStepper'
import StepController from '@/components/ui/StepController'

export function TwoSumViz() {
  const steps = buildSteps([2, 7, 11, 15], 9)
  const { step, controls } = useVizStepper(steps)

  return (
    <div className="space-y-4">
      <ArrayViz array={step.array} highlights={step.highlights} />
      <HashMapViz map={step.hashMap} />
      <p className="text-sm text-muted">{step.description}</p>
      <StepController {...controls} total={steps.length} />
    </div>
  )
}

function buildSteps(nums: number[], target: number) {
  // Return an array of step snapshots that the stepper will play through
  // Each step: { array, highlights, hashMap, description }
}

## Intuition

The naive approach checks every pair — that's O(n²). But we only need to check each number once if we store what we've already seen.

## The Hash Map insight

For each number `x`, we need `target - x`. If we store every number we've visited in a hash map...

<Callout type="tip">
  The key insight: instead of looking forward for the complement, look backward — it might already be in the map.
</Callout>

import twoSum from './problems/two-sum'

export const problems = [
  twoSum,
  // your new problem here
]