Sorting Algorithms Visualizer

Language / Язык / Idioma: English | Русский | Español

An interactive educational web application for exploring and visualizing 8 classic sorting algorithms step by step. Enter your own array, choose the sort direction, adjust the animation speed, and watch every comparison and swap happen in real time.

---

Table of Contents

• Features
• Algorithms
• Tech Stack
• Getting Started
• Project Structure
• Internationalization
• Testing
• CI/CD

---

Features

• Step-by-step animation — each comparison, swap, and final placement is highlighted in a distinct color
• Custom input — enter any sequence of integers separated by spaces
• Sort direction — toggle between ascending and descending order
• Adjustable speed — a slider controls the animation delay from slow (educational) to fast
• Algorithm details — each algorithm has a Description tab, a Properties tab with time/space complexity, and an interactive Testing tab
• Binary tree visualization — Heap Sort shows the heap structure as a binary tree during sorting
• GIF previews — animated previews demonstrate the algorithm before you run it
• Multilingual UI — full support for English, Russian, and Spanish; switched instantly in the header

---

Algorithms

Algorithm	Best	Average	Worst	Space
Bubble Sort	O(n)	O(n²)	O(n²)	O(1)
Cocktail Shaker Sort	O(n)	O(n²)	O(n²)	O(1)
Comb Sort	O(n log n)	O(n²)	O(n²)	O(1)
Insertion Sort	O(n)	O(n²)	O(n²)	O(1)
Selection Sort	O(n²)	O(n²)	O(n²)	O(1)
Quick Sort	O(n log n)	O(n log n)	O(n²)	O(1)
Merge Sort	O(n log n)	O(n log n)	O(n log n)	O(n)
Heap Sort	O(n log n)	O(n log n)	O(n log n)	O(1)

---

Tech Stack

Layer	Technology
UI Framework	React 19
Language	TypeScript 5
Styling	SCSS Modules
Build tool	Vite
Package manager	Yarn
Testing	Jest + React Testing Library
i18n	Custom React Context (no external lib)

---

Getting Started

Prerequisites

• Node.js 18+ (22 recommended)
• Yarn 1.x

Installation

git clone https://git.smekhov-alex.com/Smeh_alex/sa_sorts
cd sa_sorts
yarn

Available Commands

Command	Description
yarn start	Start the development server
yarn build	Build for production into the dist/ folder
yarn test	Run the full test suite with Jest

---

Project Structure

sa_sorts/
├── public/                       # Static HTML shell
├── src/
│   ├── types/
│   │   └── sorts.ts              # SortNames enum + SortedArrayItem interface
│   ├── context/
│   │   └── LangContext.tsx       # LangProvider, useLang hook, LANGS constant
│   ├── locales/
│   │   ├── types.ts              # Translations interface
│   │   ├── en.ts / ru.ts / es.ts # Translation objects
│   │   └── index.ts              # Re-exports + translations map
│   ├── components/
│   │   ├── Header/               # App header with language toggle
│   │   ├── SortingList/          # List of all algorithm accordions
│   │   ├── SortingItem/          # Accordion card: tabs + algorithm data
│   │   ├── DescriptionTab/       # Algorithm description with GIF
│   │   ├── PropertiesTab/        # Time/space complexity table
│   │   ├── SortingTab/           # Interactive sort + animation engine
│   │   │   ├── funcs/            # 8 top-level async sort functions
│   │   │   ├── subFuncs/         # Shared recursive/iterative helpers
│   │   │   └── utils/            # Atomic animation state helpers
│   │   └── BinaryTree/           # Binary heap tree for Heap Sort
│   ├── gifs/                     # Animated previews for each algorithm
│   ├── icons/                    # SVG icons
│   └── styles/                   # Global styles and variables
├── tests/                        # Jest test suites (mirrors src/)
│   ├── jest.config.cjs
│   └── __mocks__/svgMock.js
└── .forgejo/workflows/
    ├── tests.yml                 # CI: runs tests on every PR
    ├── deploy.yml                # CD: pre-commit + test + deploy on push to main
    └── pre-commit.yml            # Runs pre-commit checks on push to main

---

Animation Engine

The animation is driven by asynchronous sort functions that mutate a SortedArrayItem[] array in place. After each logical step the function calls setWithTimer, which:

1. Checks a isCancelled() flag (set on component unmount or sort restart)
2. Calls React's setSortedArray to trigger a re-render
3. Awaits a setTimeout with the current getDelay() value

The AnimationControl object ({ isCancelled, getDelay }) is threaded through every sort function, sub-function, and utility helper via CallFunctionProps, keeping the UI layer fully decoupled from the algorithm logic.

Element states (rendered with distinct colors):

SortedArrayItem field	Meaning
isSelected	Currently being compared
isSwitching	Being swapped right now
isEndPosition	Permanently in its final sorted position
element === -1	Invisible divider (used in Merge Sort partitions)

---

Internationalization

The UI is fully translated into English, Russian, and Spanish. Language is switched at runtime — no page reload required.

How it works:

• src/locales/ contains one typed translation object per language (en.ts, ru.ts, es.ts) that conform to Translations
• LangProvider wraps the app and stores the active language in useState; the resolved translation object is memoized with useMemo
• Any component consumes translations via the useLang() hook: const { lang, translation, setLang } = useLang()
• The language toggle buttons in the Header call setLang directly

Adding a new language:

1. Create src/locales/<code>.ts implementing Translations
2. Add it to the translations map and LANGS array in src/locales/index.ts

---

Testing

Tests live in tests/ and run via Jest (not react-scripts test), configured in tests/jest.config.cjs.

yarn test

Coverage: 182 tests across 19 test suites — all green.

Key setup details:

• modulePaths: ['<rootDir>/src'] mirrors the baseUrl from tsconfig.json so path aliases work in tests
• SVG imports are mapped to a simple mock via moduleNameMapper
• The default language in LangProvider is 'en'; component tests use translations.en directly

---

CI/CD

Continuous integration and deployment run on Forgejo Actions.

tests.yml — triggered on every pull request (opened, synchronized, or reopened):

5 parallel jobs: array_transforms, components, context, utils, sorts. Each job runs: checkout → restore node_modules cache → install dependencies → yarn test tests/<dir>

deploy.yml — triggered on every push to main:

3 sequential jobs: pre-commit (linting/formatting checks) → test (yarn test) → deploy (yarn build + rsync to server)

---

License

This project is open-source. Source code is available at git.smekhov-alex.com/Smeh_alex/sa_sorts.