Error Control Coding Interactive Demo

An interactive web application for exploring error control coding fundamentals, designed for graduate students in wireless communications. This educational tool covers block codes (Hamming) and convolutional codes with real-time visualization of encoding, decoding, and error correction.

Live Demo (Deploy to Vercel to activate)

Key Features

Hamming (7,4) Block Code

• Interactive Encoding: 4-bit message input with step-by-step matrix multiplication visualization
• Generator Matrix Display: Shows systematic form G with color-coded data and parity bits
• Error Injection: Click any bit in the 7-bit codeword to simulate channel errors
• Syndrome Decoding: Real-time syndrome calculation using parity check matrix H
• Error Correction: Automatic single-bit error detection and correction with visual feedback

(2,1,3) Convolutional Code

• Shift Register Visualization: Canvas-based animation showing 3-stage register with XOR connections
• Trellis Diagram: Interactive 4-state trellis with branch labels and path highlighting
• Step-by-Step Encoding: Watch bits flow through the encoder one step at a time
• Error Injection: Flip bits in the encoded sequence to test error correction
• Viterbi Decoder: Real-time maximum likelihood decoding with path metrics display

Educational Tools

• Interactive Quiz: 10 questions covering both coding schemes with hints and explanations
• Dig Deeper: Annotated code examples with KaTeX-rendered equations
• Real-time Feedback: Immediate visualization of all encoding/decoding operations

Educational Value

Concept	What You'll Learn
Block Codes	Systematic encoding, parity check matrices, syndrome decoding
Hamming Distance	Minimum distance, error detection vs. correction capability
Convolutional Codes	Memory in encoders, constraint length, code rate
Trellis Representation	State transitions, branch metrics, path visualization
Viterbi Algorithm	Maximum likelihood decoding, survivor paths, traceback
Error Correction	Single-bit correction (Hamming), multi-bit correction (Viterbi)

Quick Start

Prerequisites

• Node.js 18+ and npm

Installation

# Clone the repository
git clone https://github.com/ANRGUSC/error-control-coding-demo.git
cd error-control-coding-demo

# Install dependencies
npm install

# Start development server
npm run dev

Build for Production

npm run build
npm run preview

Usage Guide

1. Select a Tab: Choose between Block Codes (Hamming) or Convolutional Codes
2. Enter Input: Set your binary message using the bit buttons
3. Encode: Click "Encode All" for instant results or "Step" for step-by-step visualization
4. Inject Errors: Click on encoded bits to flip them and simulate channel noise
5. Observe Decoding: Watch the decoder identify and correct errors in real-time
6. Take the Quiz: Test your understanding with interactive questions
7. Dig Deeper: Explore the actual algorithms with annotated code examples

Project Structure

src/
├── components/
│   ├── hamming/           # Hamming code UI components
│   │   ├── HammingTab.tsx
│   │   ├── HammingEncoder.tsx
│   │   ├── HammingDecoder.tsx
│   │   └── ...
│   └── convolutional/     # Convolutional code UI components
│       ├── ConvTab.tsx
│       ├── ShiftRegisterCanvas.tsx
│       ├── TrellisDiagram.tsx
│       ├── ViterbiDecoder.tsx
│       └── ...
├── utils/
│   ├── hamming.ts         # Hamming encode/decode algorithms
│   ├── convolutional.ts   # Conv encoder & Viterbi decoder
│   └── binary.ts          # GF(2) arithmetic utilities
├── pages/
│   ├── Simulator.tsx      # Main simulator page
│   ├── Quiz.tsx           # Interactive quiz
│   └── DigDeeper.tsx      # Code examples
└── types/
    └── index.ts           # TypeScript interfaces

Technical Details

Hamming (7,4) Code Parameters

Parameter	Value
Code Rate	4/7 ≈ 0.571
Minimum Distance	3
Error Correction	1 bit
Error Detection	2 bits

Generator Matrix (Systematic Form):

G = [1 0 0 0 | 1 1 0]
    [0 1 0 0 | 1 0 1]
    [0 0 1 0 | 0 1 1]
    [0 0 0 1 | 1 1 1]

(2,1,3) Convolutional Code Parameters

Parameter	Value
Code Rate	1/2
Constraint Length (K)	3
Number of States	4
Generator Polynomials	g1=[1,1,1], g2=[1,0,1]

Output Equations:

c1 = m(i) ⊕ m(i-1) ⊕ m(i-2)
c2 = m(i) ⊕ m(i-2)

Technology Stack

• React 18 - UI framework with hooks
• TypeScript - Type-safe development
• Vite - Fast build tooling
• Tailwind CSS - Utility-first styling
• KaTeX - LaTeX equation rendering
• HTML Canvas - Shift register and trellis visualization

Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Deploy with default settings (the vercel.json handles SPA routing)

Manual Deployment

npm run build
# Deploy the 'dist' folder to any static hosting service

License

This project is licensed under the PolyForm Noncommercial License 1.0.0.

• Free for: Educational use, research, and personal projects
• Commercial use: Requires a separate commercial license - contact the author

Author

Bhaskar Krishnamachari Professor, USC Viterbi School of Engineering EE 597: Wireless Networks

Developed with Claude Code - January 2026